用CSS实现无图片圆角效果

流星玛丽

妮〃似曾相识℡ 发表于 2012-3-27 16:15
怎么都是版主的啦

我也就是尝试一下子

妮〃似曾相识℡

{:soso_e153:} 怎么都是版主的啦

流星玛丽

css圆角效果，IE6, firefox均显示正常
＜html＞
＜head＞
＜title＞css圆角效果--七度空间网页教学网＜/title＞
＜meta http-equiv="content-type" c＞
＜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格式的文档，用浏览器打开即可看到效果

---

【玛丽文化 www.maliwenhua.com】 【冷饭店 www.lhlfd.com.cn】   【办公文具 www.maliwenhua.com】【冷饭店胡辣汤 www.lhlfd.com.cn】

vip_meng

所谓的圆角功能、现在的html5已经很好的做到了这点，引用个文件，直接调用，既省时，有漂亮

王磊

给你顶个！呵呵