如何用CSS实现圆角框?
2016-01-09 · 做真实的自己 用良心做教育
//css代码
.divbox{ width:200px;}
.div1{ background:#999999; border-left:#999999 solid 1px; border-right:solid 1px #999; margin:0px 2px; height:1px; overflow:hidden;}
.div2{background:#FFF; border-left:#999999 solid 1px; border-right:solid 1px #999; margin:0px 1px; height:1px; overflow:hidden;}
.divmiddle{ height:100px;border-left:#999999 solid 1px; border-right:solid 1px #999;}
//html代码
<div class="divbox">
<div class="div1"></div>
<div class="div2"></div>
<div class="divmiddle">内容</div>
<div class="div2"></div>
<div class="div1"></div>
</div>
上面代码实现的效果如下:
5px代表的是左上角的弧度;
6px代表的是右上角的弧度;
7px代表的是右下角的弧度;
8px代表的是左下角的弧度;