一直以为用CSS做一个圆角的链接会很麻烦,在蓝色理想上看到一些漂亮的圆角链接,背景图片还可以切换,于是下载下来看了一下,发现原来实现起来也很简单。下面这个是效果图:

具体实现方法如下:
先制作好这样两张背景图片,一张为左边的圆角,比较窄,另一张为右边的圆角,比较宽(为了使较长的链接仍能正常显示),如下图:
(left.gif)
(right.gif)

CSS代码为(注意其中的背景图片的定位,这个是实现效果的关键所在):

body {
margin:0;
padding:0;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
background-color:#fff;
text-align:center;
}
#tabs{
margin-left:auto;
margin-right:auto;
margin-top:40px;
width:100%;
background:#fff;
line-height:normal;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;

19 Comments

  1. 呵呵,也有,但是CSS代码很复杂的哦!在蓝色理想的论坛里有讨论这个的

  2. 阿姨,不会偶教你哈,放心拉,熟人,半折拉.
    Fdream能不能给偶一个叫你的中文称呼,偶英文0级哈~~!!
    存在的核心是一种虚空——史铁生

    偶叫你空虚要得不?

  3. hiahia……还敢叫阿姨哦?
    就叫空虚吧,反正我给你称呼你也会给我另取一个名字的……

  4. 偶刚才喊她,她不闹咯,还说偶乖,哈哈,指鹿为马的意思是本来不是马,多指几次就成了马哈!~~

    空虚好听哈,你空虚的时候是不是想找个人来陪

  5. 哈哈,你还真行哦!本来不是阿姨,多叫几声就成阿姨了,哈哈……
    空虚的时候不如你来陪吧,嘿嘿……

  6. 本来不空虚滴,多喊几次都空虚咯.
    偶来陪?偶要告你,偶还未成年,你想咋个陪嘛?只要在法律界线以内滴事,偶都愿意做!~~~

  7. 哎呀,偶紧张死拉,偶还以为你要把怎么样呢?再怎么说人家还是第一次,你轻点就是,偶忍忍就过去咯

  8. 555555~~偶还以为认识你这么久,你对偶就象对自家人一样拉,原来你还是对偶这样,寒心拉[cry][cry][cry][cry][cry]

  9. 谁叫你不给偶正经一点的!
    对你,你对博客在教育网内几乎是上不了,好郁闷啊………………………

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.