如何在所有主要Web浏览器上支持border-radius？

Question

除了分别为每个引擎提供CSS之外，似乎没有办法支持border-radius。现在看来你必须要宣告该属性三到四次（如果你想支持更多不起眼的引擎，可能会更多）。

我的临时解决方案是通过这个正则表达式传递我的所有CSS：

正则表达式：

border(-)?(top|bottom)?(-)?(left|right)?-radius:(.+?);

替换：

-moz-border-radius$1$2$4:$5;
-webkit-border$1$2$3$4-radius:$5;
-khtml-border$1$2$3$4-radius:$5;
border$1$2$3$4-radius:$5;

这将搜索官方CSS3选择器的所有实例，并将其替换为自身，以及Mozilla，WebKit和KHTML的引擎特定选择器。

有更好的方法吗？

WebKit和Mozilla何时计划支持CSS3选择器？ （他们已经？）

Answer 1

应该是：

.myClass
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

边框半径低于另一个。

为什么？因为，现在新浏览器不再需要自己的引擎破解（例如firefox 4），他们应该使用他们在CSS文件中收到的最后一个命令。这样，所有浏览器理解CSS3规范的圆角应相同，您不必很快更改CSS。

Answer 2

对于所有四个角落，您可以使用以下一个

-webkit-border-radius: 3px;
-khtml-border-radius: 3px;    
-moz-border-radius: 3px;
border-radius: 3px;

如果你想在任何一个角落添加曲线（现在我显示左下角）尝试以下

-webkit-border-bottom-left-radius: 4px;
-khtml-border-bottom-left-radius: 4px;  
-moz-border-radius-bottomleft: 4px;
border-radius-bottomleft: 4px;

由于

Answer 3

在CSS中这样：

.myClass
{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

IE是目前唯一不支持它的浏览器（直到IE9推出它）。但在此之前，您可以使用此脚本：DD Roundies。这是一个脚本，它将绕过IE的角落，只需稍加设置即可。在Curvy Corners处还有另一个查找webkit规则并将它们添加到IE中。