Css暴力绘制圆角矩形

Css3.0中有border-radius;属性可以绘制，当圆角设置为整个border一半大小的时候，还可以画出圆和椭圆。

这里讲一下一种暴力绘制的思路

其实方法很简单，圆角矩形和普通矩形的区别主要在于四个角。选其中一个放大到像素级别大致如图： 



这里我们实现简单的暴力绘制。实际上就是把每个角上的几个像素画好。

很直白的直接把整个矩形分为好几个部分，中间是两条侧边，上部已经标识出来了，1234，总共四条线。1是横框的上边缘，2可以看成2px大小的竖框边缘（height为1px，实际上不设置height的话，默认就是1px），3为1px竖框边缘，4为height=2px的竖框边缘。

因此绘制起来，上方需要4个block元素的几个border。下方同理，中间一个block的左右两边。

<div class="rect">
<!--上边沿四根-->
<div class="line l1_top"></div>
<div class="line l2"></div>
<div class="line l3"></div>
<div class="line l4"></div>
<!--左右两侧边框-->
<div class="TwoLine"><b>绘制圆角矩形</b></div>
<!--下边沿四根-->
<div class="line l4"></div>
<div class="line l3"></div>
<div class="line l2"></div>
<div class="line l1_bottom"></div>
</div>

/*圆角矩形模块*/
.rect{
margin:30px auto;
width:50%;
}
.line{
height:1px;
}
.TwoLine{
height:80px;
text-align:center;
line-height:80px;
border-left:1px solid black;
border-right:1px solid black;
}
.l1_top{
margin:0 5px;
border-bottom:1px solid black;
}
.l1_bottom{
margin:0 5px;
border-top:1px solid black;
}
.l2{
margin:0px 3px;
border-left:2px solid black;
border-right:2px solid black;
}
.l3{
margin:0px 2px;
border-left:1px solid black;
border-right:1px solid black;
}
.l4{
margin:0px 1px;
height:2px;
border-left:1px solid black;
border-right:1px solid black;
}

根据border-radius中像素大小，圆角的造型也不一，当然border-radius在像素级别上精细的多。

上方为暴力绘制，下方为border-radius。这种暴力绘制的方法画出来的图效果还是比border-radius差很多