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

来源：互联网收集：自由互联发布时间：2021-06-13

除了分别为每个引擎提供CSS之外,似乎没有办法支持border-radius.现在看来你必须宣告该属性三到四次(如果你想支持更多模糊的引擎,可能会更多). 我的临时解决方案是通过这个正则表达式

除了分别为每个引擎提供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选择器？ (他们已经？)

它应该是：

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

边界半径低于另一个.

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

相关文章