CSS_淘宝页面上一些圆角的做法

 看了看淘宝一些页面上的圆角是如何制作的.发现有一部分是直接做成完整的图片(固定宽度),有些则是多余标签+四个角的图片来做.

 

从FF中边查看边摘出第二种方法的代码

 

<div class="box "> <span class="rc-tp"><span></span></span> <div class="hd"> <h4>h4h4h4</h4> </div> <div class="bd"> bdbdbdbd </div> <span class="rc-bt"><span></span></span> </div> <div class="box orangeBox"> <span class="rc-tp"><span></span></span> <div class="hd"> <h4>h4h4h4</h4> </div> <div class="bd"> bdbdbdbd </div> <span class="rc-bt"><span></span></span> </div>

 

.box { margin:10px; width:180px; height:200px; border:0px solid blue;} .box .rc-bt , .box .rc-tp { display:block; height:4px; position:relative;} .box .hd, .box .rc-tp , .box .rc-bt , .box .rc-tp span, .box .rc-bt span { background:url(images/box_bg.png) no-repeat scroll 0 0;} .box .rc-tp , .box .rc-bt{ background-position:-3px 0px; margin-bottom:-4px;} .box .rc-bt { background-position:-3px -3px; margin-top:-4px;} .box .rc-tp span, .box .rc-bt span { float:right; height:4px; width:4px;} .box .rc-bt span { background-position:0 -3px;} .box .hd { background-color:#FBFBFB; background-position:0 -7px; background-repeat:repeat-x; border-color:#CCCCCC #CCCCCC -moz-use-text-color; border-style:solid solid none; border-width:1px 1px medium; height:21px; } .orangeBox .hd { border-color:#FFD08D #FFD08D } .orangeBox .rc-tp , .orangeBox .rc-bt{ background-position:-3px -60px; margin-bottom:-4px;} .orangeBox .rc-bt { background-position:-3px -63px; margin-top:-4px;} .orangeBox .rc-bt span { background-position:0 -63px;} .orangeBox .rc-tp span { background-position:0 -60px;} .orangeBox .bd { border:1px solid #FFD08D;}

/* .orange 这部分是我自己写的*/

 

大概分析一下:

     淘宝div圆角,使用了多余标签+圆角图片处理( 类似于")(" 这样的一个圆角图片,对各个角进行背景图的重新定位 ).
 
优点:多余标签较少,易于添加,使用图片,则圆角也更清晰;FF,IE8,Opera中正常
缺点:扩展性不好,每种颜色的圆角都要做进图片里; 另在IE6/7中不正常,应该是针对此浏览器写有HACK(再找时间查看)