用CSS轻松实现圆角
Posted on May 25, 2006 by Fdream
一直以为用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;
Related Posts
19 Responses to <用CSS轻松实现圆角>
Leave a Reply
好有趣，下次要用的时候来看看，哈哈
呵呵，也有，但是CSS代码很复杂的哦！在蓝色理想的论坛里有讨论这个的
我前些时候好像见过不用图片做圆角的。
老东西咯,偶高中时候就学过咯，但现在还是不会~~[surprised]
我太落后了……-_-
[sleep]偶不懂捏
阿姨,不会偶教你哈,放心拉,熟人,半折拉.
Fdream能不能给偶一个叫你的中文称呼,偶英文0级哈~~!!
存在的核心是一种虚空——史铁生
偶叫你空虚要得不?
hiahia……还敢叫阿姨哦？
就叫空虚吧，反正我给你称呼你也会给我另取一个名字的……
偶刚才喊她,她不闹咯，还说偶乖,哈哈,指鹿为马的意思是本来不是马,多指几次就成了马哈!~~
空虚好听哈，你空虚的时候是不是想找个人来陪
哈哈，你还真行哦！本来不是阿姨，多叫几声就成阿姨了，哈哈……
空虚的时候不如你来陪吧，嘿嘿……
本来不空虚滴,多喊几次都空虚咯.
偶来陪?偶要告你,偶还未成年，你想咋个陪嘛?只要在法律界线以内滴事,偶都愿意做!~~~
哈哈，小朋友，表紧张，扯淡就行……
哎呀,偶紧张死拉，偶还以为你要把怎么样呢?再怎么说人家还是第一次,你轻点就是,偶忍忍就过去咯
555555~~偶还以为认识你这么久,你对偶就象对自家人一样拉，原来你还是对偶这样,寒心拉[cry][cry][cry][cry][cry]
[hidro]你这……我要让你阿姨教育教育你！
谁叫你不给偶正经一点的！
对你，你对博客在教育网内几乎是上不了，好郁闷啊………………………
[cry][cry]你这么说就是说偶滴博客没有教育意义是不是?
手工引用
http://0e2.net/post/421.html
呃……又是一个手工引用……[yuk]