样式1：简洁型css圆角矩形
<style>b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid#999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
</style>
<body>
<div>
<bclass="b1"></b><bclass="b2d1"></b><bclass="b3d1"></b><bclass="b4d1"></b>
<div class="b d1">
<font style="font-size:26px;color:red; margin:0px10px;">简洁型css圆角矩形</font>
</div>
<b class="b4bd1"></b><bclass="b3bd1"></b><bclass="b2bd1"></b><bclass="b1b"></b>
</div>
</body>
样式2：无图片 实现圆角框
<style type="text/css">
div.RoundedCorner{background:#9BD1FA; width:400px;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden;background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<div class="RoundedCorner">
<b class="rtop"><bclass="r1"></b><bclass="r2"></b><bclass="r3"></b><bclass="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><bclass="r4"></b><bclass="r3"></b><bclass="r2"></b><bclass="r1"></b></b>
</div>
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid#999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
</style>
<body>
<div>
<bclass="b1"></b><bclass="b2d1"></b><bclass="b3d1"></b><bclass="b4d1"></b>
<div class="b d1">
<font style="font-size:26px;color:red; margin:0px10px;">简洁型css圆角矩形</font>
</div>
<b class="b4bd1"></b><bclass="b3bd1"></b><bclass="b2bd1"></b><bclass="b1b"></b>
</div>
</body>
样式2：无图片 实现圆角框
<style type="text/css">
div.RoundedCorner{background:#9BD1FA; width:400px;}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden;background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
<div class="RoundedCorner">
<b class="rtop"><bclass="r1"></b><bclass="r2"></b><bclass="r3"></b><bclass="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><bclass="r4"></b><bclass="r3"></b><bclass="r2"></b><bclass="r1"></b></b>
</div>
样式3：3D效果css圆角矩形
<styl
最低0.47元/天 解锁文章
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
