我能想到的圆角背景的实现方法
好久没写文章了哈。ZH我最近在处理一些事情，然后一直在看书，其他的我也不说什么了。我写CSS，找到了方法之后就会用到实际的过程当中，然后很少再去想别的方法。说实在的，用最成熟的解决方法固然很好，但思维不够发散，总归不够灵活。所以我一边看看书，想到了一些常规问题的解决方法的时候，就拿出来写一下，比如说这篇。网页设计中很多地方使用到了圆角，最常用的方法应该是用图片来实现吧，但是有多少种方法大家总结过了没？我先总结一下吧。
1、使用CSS3的方法
CSS3作为新技术，被浏览器慢慢的支持，使用它来制作圆角是最简单不过的了，我的这个博客主题Vitality中大量的圆角都是用CSS3写的。不过遗憾的是，并不是所有的浏览器都支持CSS3，比如在国内占有率极大的IE系浏览器（6/7/8），还有低版本的Opera等。而且目前W3C对CSS3的标准还没出台，所以Gecko和Webkit系浏览器都有自己的写法。
#css3{
border-radius:10px; /*IE9, Opera新版本支持*/
-moz-border-radius:10px; /*Firefox*/
-webkit-border-radius:10px; /*Chrome, Safari*/
}
这种方法比较省事，所以我的博客用了……
2、使用CSS2.1的方法
其实这是比较老一点的方法，效果相当不错，但是我不太喜欢用，因为要写不少标签，感觉麻烦，而实际上并不麻烦。另外这种方法最大的优点是纯CSS实现，不使用图片。对于单色的圆角背景来说，如果页面中出现得比较频繁，那么为它们定义好class，再统一使用也可以省不少事。
HTML代码这样写
<div class="top_r"><em class="r_a"></em><em class="r_b"></em><em class="r_c"></em><em class="r_d"></em></div>
<p id="css2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bottom_r"><em class="r_d"></em><em class="r_c"></em><em class="r_b"></em><em class="r_a"></em></div>
CSS代码这样写
#css2{
padding:10px;
background:#F09;
color:#fff;
}
.r_a,.r_b,.r_c,.r_d{
background:#F09;
display:block; /*让em显示在不同的行*/
height:1px;
font-size:0;
overflow:hidden; /*防止溢出让em变高*/
}
.r_a{margin:0 5px;}
.r_b{margin:0 3px;}
.r_c{margin:0 2px;}
.r_d{margin:0 1px;height:2px;}
如果代码不够直观，那么看看下面的图，应该比较好理解了吧~
3、好像是叫“山顶角”的技术
这是以前在一本书上看到的，很老的技术，用position来定位元素，然后取四张含有圆角的角背景图片，并把它们定位到方形的四个顶点。现在我们来改进一下技术，把四个角的图片合并到一张图片上，然后用CSS Sprites技术来弄，看看下面这张图，应该就很容易理解这是个什么技术了吧。
不过，不过，万恶的IE6/7，特别是IE6，使用这种技术的时候，定位上很容易出错，因为给em用absolute定位的时候，bottom属性不能很好的被支持，所以我在demo里面使用的是top，这样总归不好。并且，我定义的是雅黑字体，如果字体不是雅黑而是其他的，这种定位还会出现别的错误，麻烦而且浪费时间，所以不推荐这种方法了。
HTML代码这样写
<div id="corner">
<em class="lt"></em><em class="rt"></em><em class="lb"></em><em class="rb"></em>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CSS代码这样写
#corner{background:#F09;color:#fff;position:relative;}
#corner p{padding:10px;}
#corner em{display:block;height:10px;width:10px;font-size:0;overflow:hidden;position:absolute;background:url(corner.png) no-repeat;line-height:0;}
#corner .lt{background-position:-10px -10px;left:0;top:0;}
#corner .rt{background-position:0 -10px;right:0;top:0;}
#corner .lb{background-position:-10px 0;left:0;top:102px;*top:100px;}
#corner .rb{background-position:0 0;;right:0;top:102px;*top:100px;}
4、直接使用圆角图片
这种方法应该使用得比较多吧，因为它适合于多种场合，浏览器的兼容性也非常好。如果对于非单色（如渐变等）的圆角背景，用它应该很方便。不过使用这种方法，可能会多写一些嵌套用的无意义的标签，页面不够“干净”，所以大家看着办吧。它的原理，我也用个简单的图来表示一下：
HTML代码这样写：
<div id="bg_repeat">
<div id="bg_left">
<div id="bg_right">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
CSS代码这样写：
#bg_repeat{background:url(bg.png) repeat-x;}
#bg_left{background:url(bg_l.png) left center no-repeat;}
#bg_right{height:200px;background:url(bg_r.png) right center no-repeat;}
#bg_right p{padding:10px;}
呃，我能想到的方法就这么多了，还有别的方法吗？希望大家能在留言中提出来，相互交流，互相学习。
原文发表于：http://www.zhcexo.com/css-round-corner/，转载请注明出处
