Question

我在使用Mozilla检测-moz-border-radius时遇到问题。它默认为正常的边界半径，如果我删除它，它只是再次回到边缘处方形。

     -webkit-border-top-right-radius: 15px;
 -webkit-border-top-left-radius: 3px;
 -webkit-border-bottom-left-radius: 15px;
 -webkit-border-bottom-right-radius: 3px;
 -moz-border-radius-topright: 15px;
 -moz-border-radius-topleft: 3px;
 -moz-border-radius-bottomleft: 15px;
 -moz-border-radius-bottomright: 3px;
 border-top-right-radius: 15px;
 border-top-left-radius: 3px;
 border-bottom-left-radius: 15px;
 border-bottom-right-radius: 3px;

我听说mozilla已经删除了-moz-的边界半径，有人可以证实吗？我正在使用此代码为网站制作按钮，我遇到了跨浏览器工作的问题。

    /* BACKGROUND GRADIENTS */
 background: #A2C838;
 background: -moz-linear-gradient(top, #A2C838, #92B432 50%, #82A02D 51%, #718C27);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #A2C838), color-stop(.5, #92B432), color-stop(.5, #82A02D), to(#718C27));
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#A2C838', EndColorStr='#718C27'); /* IE6,IE7 */
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#A2C838', EndColorStr='#718C27')"; /* IE8 */

问题是我不能真正使用border-radius，因为它现在似乎影响了mozilla和IE，但由于IE不支持渐变，我不得不使用滤镜，它将我可爱的弯角还原回正方形。我可以让他们两个都是正方形但我喜欢圆角的外观，并希望我能保存它们。提前谢谢。

Answer 1

如果你需要在IE中使用圆角，你可以使用预渲染的渐变图像作为背景而不是过滤器，或尝试将border-radius应用于容器元素并使用overflow: hidden来查看如果渐变过滤器被容器边框剪切。

我听说mozilla已经删除了-moz-的边界半径，有人能证实这一点吗？

是的，it is gone as of Firefox 13。

当同一属性的标准版本如此良好地实施这么长时间时，确实没有必要支持非标准属性。在任何情况下，也没有理由使用非标准前缀版本而非标准的前缀版本，因为供应商前缀的整个点是提供可能会或可能不会最终成为标准的实验性实现。你不能总是依赖那些非标准的财产。

IE过滤器将始终忽略border-radius，这是设计使然。但是，仅仅因为一个浏览器正在做某事，非标准方式并不意味着你必须对其他所有浏览器都采用非标准方式。此外，由于IE无论如何都会偏离角落，因此在代码中保留未加前缀的border-radius毫无害处。

Answer 2

border-radius:10px;
-moz-border-radius:10px;

在你的css中添加border-radius

Answer 3

您可以使用PIE.HTC - Progressive Internet Explorer HTML Component在IE中同时拥有border-radius和linear-gradient。所以不需要使用微软过滤器。

Mozilla没有检测到CSS -moz-border-radius

3 个答案: