分享用CSS实现无图片圆角效果

作者：袖梨 2022-07-02

圆角效果，IE6, firefox均显示正常

代码如下

复制代码

＜html＞
＜head＞
＜title＞css圆角效果--网页教学网＜/title＞
＜meta http-equiv="content-type" content="text/html; charset=gb2312"＞
＜style type="text/css"＞
div.RoundedCorner{background: #9BD1FA}
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＞
＜/head＞
＜body＞
＜div class="RoundedCorner"＞
＜b class="rtop"＞＜b class="r1"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r4"＞＜/b＞＜/b＞
＜br＞无图片实现圆角框＜br＞＜br＞
＜b class="rbottom"＞＜b class="r4"＞＜/b＞＜b class="r3"＞＜/b＞＜b class="r2"＞＜/b＞＜b class="r1"＞＜/b＞＜/b＞
＜/div＞
＜/body＞
＜/html＞

将上面的代码保存成html格式的文档，用浏览器打开即可看到效果。