现在位置:主页>网页制作>CSS教程> 文章内容

css圆角效果-网页特效

收藏发布更新日期:2008-08-17 点击:
#lt;html#gt;#lt;br#gt;
#lt;head#gt;#lt;br#gt;
#lt;title#gt;css圆角效果--网页特效#lt;/title#gt;
#lt;meta http-equiv="content-type" content="text/html; charset=gb2312"#gt;
#lt;style type="text/css"#gt;
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}#lt;br#gt;
#lt;/style#gt;
#lt;/head#gt;
#lt;body#gt;
#lt;div class="RoundedCorner"#gt;
#lt;b class="rtop"#gt;#lt;b class="r1"#gt;#lt;/b#gt;#lt;b class="r2"#gt;#lt;/b#gt;#lt;b class="r3"#gt;#lt;/b#gt;#lt;b class="r4"#gt;#lt;/b#gt;#lt;/b#gt;
#lt;br#gt;无图片实现圆角框#lt;br#gt;#lt;br#gt;
#lt;b class="rbottom"#gt;#lt;b class="r4"#gt;#lt;/b#gt;#lt;b class="r3"#gt;#lt;/b#gt;#lt;b class="r2"#gt;#lt;/b#gt;#lt;b class="r1"#gt;#lt;/b#gt;#lt;/b#gt;
#lt;/div#gt;
#lt;/body#gt;
#lt;/html#gt;