看到一种css实现圆角的方法

实现圆角，最经常使用的是使用背景图和border-radius属性。

圆角背景图

background: url(./bg.png);

• 优势：兼容各浏览器

• 缺点：适应性很差，没法拉伸；须要请求图片资源。

border-radius

border-radius: 5px;

• 优势：可拉伸，简单方便，CSS实现

• 缺点：只兼容现代浏览器

看到的方法

这个方法就略奇葩，但确实出如今了咱们的产品中。大体思路是使用不一样宽度的1px直线达到渐变的效果。
具体来讲：使用几个<b>标签，用margin控制宽度，从上到下一次变长，形成一种圆角的感受。

因此这个圆角其实只是模拟的圆角，并非很圆，但应该也瞒混的过去...

我的感受

• 优势：兼容各浏览器，可拉伸，CSS实现

• 缺点：代码太复杂；圆角其实并非特别圆...

HTML代码：

<div class="box line">
    <b class="line line1"></b>
    <b class="line line2"></b>
    <b class="line line3"></b>
    <b class="line line4"></b>
    <div class="box-content"></div>
    <b class="line line4"></b>
    <b class="line line3"></b>
    <b class="line line2"></b>
    <b class="line line1"></b>
</div>

CSS代码：

.box{
    width:200px;
    height:62px;
    margin:20px;
}
.box .line{
    display:block;
    height:1px;
    overflow: hidden;
    background: #09f;
}
.box .line1{ margin:0 5px; }
.box .line2{ margin:0 3px; }
.box .line3{ margin:0 2px; }
.box .line4{ margin:0 1px; }
.box .box-content{
    width:200px;
    height:52px;
    background: #09f;
}

总结

运用一些想象力，CSS能够实现不少好玩的东西。不过对于圆角，我的仍是喜欢border-radius的实现，由于简单，代码简洁，低版本浏览器退化到直角，也是很是好看的，有时候甚至以为直角比圆角还好看。