DIV CORNER 圆角实现

实现原理:

根据像素原理,把边角的几个像素颜色调成背景色。

代码如下:
<style type="text/css">
div#coner{ margin: 0 10%;background: #964689}

b.top, b.bottom{display:block;background: #FFF}
b.top b, b.bottom b{display:block;height: 1px;
    overflow: hidden; background: #964689}
b.line1{margin: 0 5px}
b.line2{margin: 0 3px}
b.line3{margin: 0 2px}
b.line4{margin: 0 1px}

</style>
<div id="coner">
<b class="top">
 <b class="line1"></b><b class="line2"></b><b class="line3"></b><b class="line4"></b>
</b>
hello</br>hello world
<b class="bottom">
 <b class="line4"></b><b class="line3"></b><b class="line2"></b><b class="line1"></b>
</b>
</div>

你可能感兴趣的:(DIV CORNER 圆角实现)