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标准解决方案》