[CSS3技术]兼容所有浏览器的CSS3圆角

[tr][td] 解决CSS3圆角兼容所有浏览器的方法。本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。
 译 ：前一段时间，我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持，但是由于某些原因IE并不支持它。
 那么要想在IE中实现圆角，你不得不使用一些技巧，比如使用带有背景图片的CSS类。
 而我知道的在各个浏览器中实现圆角的较简单快速的方案是结合CSS3和JavaScript。CurvyCorners是一个为HTML元素创建漂亮的圆角的免费JavaScript库。效果如下：



 该脚本的最大优势是可以在Safari/Chrome/Firefox中使用原生的CSS3属性(通过-webkit-border-radius和-moz-border-radius私有属性分别支持)而在IE和Opera中使用JavaScript。

 

 你所需要做的就是在页面中引入curvycorners.js:

<span style="color: #009900"><span style="color: #000000; font-weight: bold"script/span span style="color: #000066"type/spanspan style="color: #66cc66"=/spanspan style="color: #ff0000""text/javascript"/span span style="color: #000066"src/spanspan style="color: #66cc66"=/spanspan style="color: #ff0000""curvycorners.js"/span>[color=#66cc66][/color]

然后定义以下样式：

.roundedCorners[color=#00aa00]{[/color]
[color=#000000][b]width[/b][/color][color=#00aa00]:[/color] [color=#933]220px[/color][color=#00aa00];[/color]
[color=#000000][b]padding[/b][/color][color=#00aa00]:[/color] [color=#933]10px[/color][color=#00aa00];[/color]
[color=#000000][b]background-color[/b][/color][color=#00aa00]:[/color] [color=#cc00cc]#DDEEF6[/color][color=#00aa00];[/color]
[color=#000000][b]border[/b][/color][color=#00aa00]:[/color][color=#933]1px[/color] [color=#993333]solid[/color] [color=#cc00cc]#DDEEF6[/color][color=#00aa00];[/color]
[color=#808080][i]/* Do rounding (native in Safari, Firefox and Chrome) */[/i][/color]
-webkit-border-radius[color=#00aa00]:[/color] [color=#933]6px[/color][color=#00aa00];[/color]
-moz-border-radius[color=#00aa00]:[/color] [color=#933]6px[/color][color=#00aa00];[/color]
[color=#00aa00]}[/color]

然后在上面的样式后面定义以下代码：

[color=#339933][/color]
addEvent[color=#009900]([/color]window[color=#339933],[/color] [color=#3366cc]'load'[/color][color=#339933],[/color] initCorners[color=#009900])[/color][color=#339933];[/color]
[color=#003366][b]function[/b][/color] initCorners[color=#009900]([/color][color=#009900])[/color] [color=#009900]{[/color]
[color=#003366][b]var[/b][/color] setting [color=#339933]=[/color] [color=#009900]{[/color]
tl[color=#339933]:[/color] [color=#009900]{[/color] radius[color=#339933]:[/color] [color=#cc0000]6[/color] [color=#009900]}[/color][color=#339933],[/color]
tr[color=#339933]:[/color] [color=#009900]{[/color] radius[color=#339933]:[/color] [color=#cc0000]6[/color] [color=#009900]}[/color][color=#339933],[/color]
bl[color=#339933]:[/color] [color=#009900]{[/color] radius[color=#339933]:[/color] [color=#cc0000]6[/color] [color=#009900]}[/color][color=#339933],[/color]
br[color=#339933]:[/color] [color=#009900]{[/color] radius[color=#339933]:[/color] [color=#cc0000]6[/color] [color=#009900]}[/color][color=#339933],[/color]
antiAlias[color=#339933]:[/color] [color=#003366][b]true[/b][/color]
[color=#009900]}[/color]
curvyCorners[color=#009900]([/color]setting[color=#339933],[/color] [color=#3366cc]".roundedCorners"[/color][color=#009900])[/color][color=#339933];[/color]
[color=#009900]}[/color][color=#339933][/color]

tl, tr, bl, br分别是:左上角(top-left)、右上角(top-right)、左下角(bottom-left)、右下角(bottom-right)。

 

 如果你有不同的CSS类(例如roundedCorners、roundedCorners_1、roundedCorners_2等)你可以像这样在前面的代码中定义:

...
curvyCorners[color=#00aa00]([/color]setting[color=#00aa00],[/color] [color=#ff0000]".roundedCorners"[/color][color=#00aa00])[/color][color=#00aa00];[/color]
curvyCorners[color=#00aa00]([/color]setting[color=#00aa00],[/color] [color=#ff0000]".roundedCorners_1"[/color][color=#00aa00])[/color][color=#00aa00];[/color]
curvyCorners[color=#00aa00]([/color]setting[color=#00aa00],[/color] [color=#ff0000]".roundedCorners_2"[/color][color=#00aa00])[/color][color=#00aa00];[/color]
...

HTML代码如下：

<span style="color: #009900"> <span style="color: #009900">


 

原文： 兼容所有浏览器的CSS3圆角
译自： CSS3 rounded corners for every browser?
版权所有，转载请注明出处，多谢！


网站内容由Css3-Html5之家整理编辑，更多内容请关注Css3-Html5之家其他相关教程。

如有疑问或建议，请到Css3-Html5之家留言。Css3-Html5之家，专业的交流学习平台。
[/td][/tr]