分享：CSS3圆角技术可以很好的美化你的页面效果，并且避免使用图片辅助，一来节省做图片的时间，二来省去浏览器加载图片导致的延迟和带宽。如今，这种使用CSS制作圆角的技术已经得到大多数主流浏览器的支持，包括Safari、GoogleChrome、IE、Opera和Firefox。让我们看一下语法、解释以及IE是如何支持border-radius的。语法和描述CSS3中用来产生圆角效果的属性是border-radius。该属性类似于width:.roundElement{border-radius:10px;}等知名属性的用法，上面代码的作用是将元素的四个角的半径值设置为10px。您还可以单独指定每个角：.pearElement{border-top-left-radius:7px;border-top-right-radius:5px;border-bottom-right-radius:6px;border-bottom-left-radius:8px;}如果觉得上面的写法太复杂，可以使用下面的border-radius简写法：oddRoundElement{border-radius:12px5px12px5px;/*or*/border-radius:12px5px;}四个值分别代表top-left,top-right,bottom-right,bottom-left的四个角。每个浏览器都支持border-radius，因为这种圆角技术出现在CSS3中。在老式浏览器或更早版本的浏览器中使用该属性时，需要在CSS中添加浏览器引擎前缀（vendorprefixes）。会像{prefix}-border-radius，具体浏览器引擎前缀写法如下：-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;/*Firefox*/-moz-border-radius-topleft:15px;/*左上角*/-moz-border-radius-topright:50px;/*右上角*/-moz-border-radius-bottomleft:15px;/*左下角*/-moz-border-radius-bottomright:50px;/*右下角*/-moz-border-radius:10px15px15px10px;/*简写toplefttoprightbottomrightbottomleft*//*webkit引擎浏览器*/-webkit-border-top-left-radius:15px;/*左上角*/-webkit-border-top-right-radius:50px;/*右上角*/-webkit-border-bottom-left-radius:15px;/*左下角*/-webkit-border-bottom-right-radius:50px;/*右下角*/基本上，您需要为每个浏览器引擎单独声明，加上这个令人讨厌的略有不同的代码以完全支持边界半径。但是，如果你使用的是最新版本的浏览器，包括火狐、谷歌、IE等，则不需要使用这些前缀，因为这项技术已经非常成熟，已经在各种最新版本的浏览器中得到普遍支持。让IE支持border-radius直到IE9不支持border-radius属性，相信很多web开发者和web应用设计者都非常沮丧。在IE9中，最重要的一点是使用边缘META标签：metahttp-equiv="X-UA-Compatible"content="IE=edge"/>如果你的IE老了，不支持border-radius，还有很多技术可以填补这一空白，我遇到的最好的解决方案是一个名为CurvyCorners的小型JavaScript包。这个CurvyCorners使用javaScript动态生成了很多div标签，利用这些div标签绘制圆角，甚至还支持抗锯齿。CurvyCorners的使用很简单。第一步是将CurvyCorners.js脚本引入页面：CurvyCorners会在DOM元素中寻找具有border-radius属性的元素，然后为它们制作圆角反过来。不需要辅助图像。你甚至可以设置特定元素的圆弧半径：varsettings={tl:{radius:12},tr:{radius:12},bl:{radius:12},br:{radius:12},antiAlias:true};/*moooo*/$('.round').each(function(rd){curvyCorners(settings,rd);});我强烈建议你应该指定需要使用圆角的元素，因为让脚本搜索整个页面寻找需要圆角的元素是一个CPU密集型过程，每次加载页面时都会执行这个过程。基本上所有浏览器都支持CSSborder-radius属性，包括IE、Firefox、Safari、GoogleChrome和Opera。这个小功能可以让你的页面看起来完全不同。
