百度有啊CSS圆角方案
日期：2009-02-18 分类：CSS
百度有啊的 CSS 圆角写法，原理和《一张图片实现圆角》差不多，也是用背景定位实现的。看代码吧： XHTML 代码：
<div class="box1"> <span class="tl"></span><span class="tr"></span> <div class="cc"> <p>圆角一</p> </div> <span class="bl"></span><span class="br"></span> </div>
CSS 代码：
.box1 {
background:url(images/bg1.gif) repeat-x #1d6cb7;
margin-top:1em;
position:relative;
zoom:1;
width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
width:5px;
height:5px;
position:absolute;
background:url(images/bg3.gif) no-repeat;
overflow:hidden;
}
.box1 .cc {
height:40px;
padding:5px;
}
.box1 .tl {
left:0;
top:0;
}
.box1 .tr {
right:0;
top:0;
background-position:0 -5px;
}
.box1 .bl {
left:0;
bottom:0;
background-position:0 -10px;
}
.box1 .br {
right:0;
bottom:0;
background-position:0 -15px;
}
查看效果（上面的代码是第一个圆角的）
看看上面代码所用到的图片能更好的理解（下面）： 
第一部分是左上角的，第二部分是右上角的，第三部分是左下角的，第四部分是右下角的。
ie6,高度或宽度为奇数，会出现问题。
是的。
.box1 .tr {right:0;top:0;background-position:0 -5px;}
.box1 .bl {left:0;bottom:0;background-position:0 -10px;}
.box1 .br {right:0;bottom:0;background-position:0 -15px;}
青色兄什么意思啊，我看了你做的效果，里面的图片不过10个像素
background-position:0 -15px;
哪一个是X轴呢？
当然是前一个background-position:0 -15px;是X横坐标，后面的一个是Y纵坐标
语法：
background-position : length || length
background-position : position || position
参数：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明：
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。
示例：
div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }