圆角矩形的实现（非css3）

额…..我知道现在谈这个东西好像的确是挺旧的，而且现在css3也出了border-radius，圆角简直不能再6。

之前面试被问过好几次，这个问题总是打得不是很完美，那个时候才开始重视这个东西。

其实对于一些对兼容要求比较高的页面，css3直接写这个方案还是不可行滴,比如ie8就不可行
赶紧甩出一条兼容情况链接

代码解决

废话不多说，先看jsfiddle的demo

原理是这样的：

一个正常的div是一个长方形的形态，那么为了看上去有圆角，可以在长方形的上方和下方叠加一些 细长线条，但是其宽度比长方形的宽度稍微递减那么一些些~连续叠加3-4个，递减2px左右的宽度，同时加上左右边距，最后一个充当矩形的上方边框，所以需要和border用同一个背景色。
当然下方也一样。
下面这张图就是主体思路，大家可以看看

发现用这种方法还可以弄出很多丑萌丑萌的圆角矩形，给你们看几张图片

是不是很丑萌

图片解决

1
2
3

.top{backgroup:上边带弧度的一小部分}
.bottom{backgroup:下边带弧度的一小部分}
.content{border-left:1px solid 颜色;border-right:1px solid 颜色}

1
2
3

<p class="top"></p>
<div class="content"></div>
<p class="bottom"></p>

图片的话需要非常注意自适应高度问题，所以不是第一个推荐的。