css实现简单圆角效果

目前，我们要在网页中使用圆角效果，总是通过切图然后嵌套很多div，用背景来实现圆角效果。对于前端开发工程师来说，圆角的确是一个让人又爱又恨的东西，一方面顾及设计师追求的美观效果，另一方面又不得不增添很多工作投入。无意中看到别人写的一个用纯粹css来实现的圆角效果，研究了一下发现对于那些需求比较简单的圆角效果还是一种很好的方法。总结了一下，可以实现自适应的纯css圆角效果。

首先，我们看一下一般圆角的结构：





从下图可以明显看出圆角和直边的关系，其实把圆角放大之后可以看到圆角是由像素化的直边组成的：



于是就有了css实现圆角的思路，就是通过用1px 的水平线条来堆叠出圆角，其中border和background的颜色填充来实现圆角边框，同时设置不同的左右margin数值（以1px为基数）来实现错位，从而整体上实现了简单的圆角效果。

下面介绍一下代码：

html部分（思路是“头部+内容+底部”）：

<div>
<b class="round">
<b class="round1"></b>
<b class="round2"></b>
<b class="round3"></b>
<b class="round4"></b>
<b class="round5"></b>
</b>
<div class="roundContent">
<!-- 显示内容区域 -->
我是内容 <br />
我是内容 <br />
我是内容 <br />
我是内容 <br />
</div>
<b class="round">
<b class="round5"></b>
<b class="round4"></b>
<b class="round3"></b>
<b class="round2"></b>
<b class="round1"></b>
</b>
</div>
通过<B>标签来模组建dom结构，上中下三部分拼合形成一个圆角整体。

css样式部分（主要是border颜色和margin数值）：

<style type="text/css">
.round{display:block}
.round *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#e7ff94;
}
.round1{
margin:0 4px;
border:1px solid #ff2000;
background:#ff2000;/*头尾边框色*/
}
.round2{
margin:0 3px;
border:1px solid #ff2000;
}
.round3{
margin:0 2px;
border:1px solid #ff2000;}
.round4{
margin:0 1px;
border:1px solid #ff2000;}
.round5{
margin:0 1px;
border:1px solid #ff2000;
}
.round1,.round2,.round3,.round4,.round5{
border-top:none;
border-bottom:none;
}
.roundContent{
border-left:1px solid #ff2000;
border-right:1px solid #ff2000;/*左右边框色*/
background:#e7ff94;
padding:10px;
}
</style>
很容易看出这不是真正的圆角，没有很好的过渡效果，只是一定程度上模拟了圆角的实现原理。对于那些要求效果比较高的圆角和设计比较复杂的圆角来说不是很适用。

具体的效果如下：