读书人

CSS圆角兑现

发布时间: 2012-10-26 10:30:59 作者: rapoo

CSS圆角实现
1.方法一:上下两张带圆角的图片。宽度固定,允许高度变动.

<div />

2.方法二:三张图片,上下两张图片再加中间的填充图片.宽度固定,允许高度变动.
<div name="code"><div />


4.方法四:采用CSS3样式,FF3,CHROME浏览器支持
-webkit-border-radius: 6px;-moz-border-radius: 6px;


5.方法五:采用border填充构造
<div class="radius_top"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div><div class="item_content">内容区</div><div class="radius_bottom"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div> .r1,.r2,.r3,.r4{overflow:hidden;height:1px;background-color:#fff;zoom:1;} .r1{margin:0 5px;background-color:#c9c9c9;} .r2{margin:0 3px;border-left:2px solid #c9c9c9;border-right:2px solid #c9c9c9;} .r3{margin:0 2px;border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;} .r4{height:2px;margin:0 1px;border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;} .item_content{border-left:1px solid #c9c9c9;border-right:1px solid #c9c9c9;background-color:#fff;zoom:1;}

部分整理自《精通CSS:高级Web标准解决方案》

读书人网 >CSS

热点推荐