如何在所有主流web浏览器上支持边框半径？
如何在所有主流web浏览器上支持边框半径？
提问于 2010-09-29 08:30:01
除了为每个引擎单独提供CSS之外，似乎没有其他方法来支持边界半径。现在看来，你必须声明这个属性三到四次(如果你想支持更多的模糊引擎，可能会更多)。
我的临时解决方案是通过这个正则表达式传递我所有的CSS：
Regexp：
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选择器？(他们已经这样做了吗？)
回答 3
Stack Overflow用户
发布于 2010-09-29 09:02:37
它应该是：
.myClass
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}边界半径低于另一个。
为什么？因为，现在新的浏览器不再需要自己的引擎hack (例如Firefox4)，它们应该使用在CSS文件中收到的最后一个命令。这样，圆角在理解CSS3规范的所有浏览器中都应该是相同的，而且您不必很快更改您的。
Stack Overflow用户
发布于 2010-09-29 12:06:37
对于所有四个角，您可以使用以下一个角
-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;谢谢
Stack Overflow用户
发布于 2010-09-29 08:33:33
在CSS中就像这样：
.myClass
{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}IE是目前唯一不支持它的浏览器(在IE9发布之前)。但在此之前，您可以使用这个脚本：DD Roundies。这是一个在IE中绕过角落的脚本，只需进行一些设置。在Curvy Corners这里还有另一个，它寻找webkit规则并将它们添加到IE中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3819923
复制相关文章
点击加载更多
相似问题
Helvetica或Verdana，在所有主流浏览器上都得到更好的支持
如何在所有浏览器中获得图像的完美边框半径？
每个支持它的浏览器中的边框半径
如何在所有主流浏览器中使文本透明
在IE中支持“边框半径”
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
