很多网站设计，界面分多个块，有直角和圆角之分，直角很容易实现，而圆角很多时候需要圆角图片作背景，但有时候只依赖css，不需要图片就可以实现圆角，说白了就是控制边框，下面一个简单的css圆角例子。
css代码

.divBox {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
b {
display: block;
height: 1px;
overflow: hidden;
}
b.a1 {
margin: 0 5px ;
background: #000;
}
b.a2 {
margin: 0 3px;
border-right:2px solid #000;
border-left: 2px solid #000;
}
b.a3 {
margin: 0 2px;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
b.a4{
margin: 0 1px;
border-right: 1px solid #000;
border-left: 1px solid #000;
}

也许注意到了，主要是选择器的边框border；

html代码

<div>
<b class=”a1″></b><b class=”a2″></b><b class=”a3″></b><b class=”a4″></b>
<div class=”divBox”>纯CSS圆角，不需图片，加载速度快，不会破坏视觉效果，如果您的鼠标有滚轮的话，按住ctrl键，同时滚动滚轮，看下效果变化</div>
<b class=”a4″></b><b class=”a3″></b><b class=”a2″></b><b class=”a1″></b>
</div>

注意类选择器的排列，a1那一行从左到右，边框越来越宽，叠加起来就很像一个弧形，看起来像圆角，同样的a4那一行顺序一颠倒，正好对称；
上面的a1、a2等名字可以随意，当叠加的类选择器越来越多时(当然参数值也要调整)，圆角的弧度会越明显；

实际效果：css圆角

p.s.这个css圆角可能有一些局限性，不知你能不能发现？——耕堂www.gengtang.net

 右上方更多相关内容/站内搜索-关键词请用空格隔开