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

css圆角效果，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格式的文档，用浏览器打开即可看到效果。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有