【转载】uecss.com
css3和html5 在大家的眼中已经不是什么新鲜的事了，但是能兼容它的浏览器却不是全部，而我只是简单的看了它们的一些属性，简单的性的了解了一下。前些时间一个同事让我写一个圆角的div，要求是尽量少放图片，我想到了css3中有这个属性
在网上查了查发现写圆角的方法还是有很多的。大概的总结了以下几点：
1.灵活的圆角
为了能让圆角更加灵活，我们可以把容器里的每个圆角都做成一个独立的元素，通过CSS强行定位到父容器的四个角上。在这个方法里，我们只需要用到下边这个图片。
HTML:
<div class="box">
<span class="crnr tl"></span> <span class="crnr tr"></span>
<h3>This is a heading</h3>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p>
<span class="crnr bl"></span> <span class="crnr br"></span>
</div>
CSS
.box{
position:relative;
width:200px;
height:300px;}
.crnr{
position:absolute;
background:url("http://uecss.com/wp-content/uploads/2010/04/crnr-sprite.jpg")no-repeat;
width:20px;
height:20px;
}
.tl{
left:0;
top:0;
background-position:00;
}
.tr{ right:0;
top:0;
background-position:-20px0;
}
.bl{
left:0;
bottom:0;
background-position:0-20px;
}
.br{right:0;bottom:0;background-position:-20px-20px;}
优点：能自动适应父容器的大小，浏览器兼容性非常强。
缺点：为了实现圆角，添加了一些没有意义的标记。
2.Border radius（边界半径）
css3中为boder增加的一个属性border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。
HTML:
<div class="box">
<h3>This is a heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula ligula eu diam tincidunt fermentum. Curabitur facilisis enim non libero cursus eu varius enim suscipit. Ut venenatis vehicula lorem ut hendrerit. Ut adipiscing augue sed ante volutpat eget ornare erat facilisis. In hac habitasse platea dictumst.</p>
</div>
CSS:
.box{width:200px;height:200px;background-color:#EE2E24;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}
优点：这种方法不需要添加任何多余的标记，而且可以非常方便睇修改圆角的半径，是最易上手的方法。
缺点：虽然符合W3C的标准，但缺乏浏览器支持。
3.多个背景图片
CSS3对background属性做出了一些重大改进，在CSS3标准里，我们可以把多个背景图片应用到同一个元素里。我们利用这个特性为容器加 上圆角效果。HTML代码与上例保持一致，在CSS中需要先把四个圆角的图片分别做好
CSS:
.box{
background:url(top-left.gif)topleftno-repeat,
url(top-right.jpg)toprightno-repeat,
url(bottom-left.gif)bottomleftno-repeat,
url(bottom-right.gif)bottomrightrepeat-y;
}
优点：没有多余的标记，可以分别设置每个圆角的半径。
缺点：使用了W3C未明确定义的方法，浏览器兼容性很差，目前只有Safari和Chrome对此方法支持良好。
4.结合CSS3和JavaScript,兼容所有浏览器
这是一种很不错的实现跨浏览器圆角的解决方案，结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费J该脚本的最大优势是可以在Safari/Chrome/Firefox中
使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。
你所需要做的就是在页面中引入curvycorners.js:avaScript库。
然后引用
<script type="text/javascript"src="curvycorners.js"></script>
然后定义以下样式：
.box{
width:220px;
padding:10px;
background-color:#DDEEF6;
border:1pxsolid#DDEEF6;/* Do rounding (native in Safari, Firefox and Chrome) */-webkit-border-radius:6px;-moz-border-radius:6px;}
然后在上面的样式后面定义以下代码：
<script type="text/JavaScript">addEvent(window,’load’,initCorners);
functioninitCorners(){varsetting={tl:{radius:6},tr:{radius:6},bl:{radius:6},br:{radius:6},antiAlias:true}curvyCorners(setting,".roundedCorners");}</script>
tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。
如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等) 你可以像这样在前面的代码中定义:
…curvyCorners(setting,".roundedCorners");
curvyCorners(setting,".roundedCorners_1");
curvyCorners(setting,".roundedCorners_2");…
HTML代码如下：
<div class="box"> </div>
这样圆角的效果就出现了！
Example Source Code#content-box { 
Example Source Code * html #content-box { 
Example Source Code*html #image-style { 
Example Source Codeoutline:none.
Example Source Code span { width: 150px; display: block }
Example Source Code#wrapper { 
Example Source CodeHTML:
Example Source Code.container { 
Example Source Code <div class="container"> 
Example Source Code .container { 
Example Source Code* html .container { 
Example Source Code body { overflow-x: hidden; }
效果如左
不要等你完成所有工作后再开始使用CSS精灵
