不用图片实现DIV圆角效果

很多网站的页面用了圆角效果，看起来使整个页面看起来圆润精美， 以往有很多人用图片+div或者table来实现圆角， 这是一个办法，可以根据实际的布局制作图片满足各种需求， 但如果只是需要简单的圆角的话就没必要了， 因为用div不用图片也可以很轻松实现圆角效果， 如下：

首先是实现style.css

div.RoundedCorner{background: #ffff33} /*div背景*/
b.rtop, b.rbottom{display:block;background: #FFFFFF}/*圆角的背景色*/
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #ffff33}/*上下边缘背景色*/
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}

接下来在页面中插入圆角div代码

<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>

我也是用这个做的页面上半部分的圆角效果看起来还不错吧， 兼容Firefox、Safari、Opera 以及 IE系列。

标签：css DIV 圆角效果

分类: 编程开发  | 评论: (0)  |  浏览:( 109 )