Question

我有一个愚蠢的问题，

如果我想在支持CSS3的某些东西的浏览器中为一个元素添加圆角，我必须为每个浏览器重复几次样式，因为它不同？

例如：

         -moz-border-radius: 12px; /* FF1+ */
         -webkit-border-radius: 12px; /* Saf3+, Chrome */
          border-radius: 12px; /* Opera 10.5, IE 9 */

这意味着，我必须为此半径边框添加3种样式，不是吗？

Answer 1

免责声明：希望你在我写完这篇文章一年后发现它现在已经完全错了，我们有一个标准，是的！

现在，是的，这是正确的......你需要所有的规则。

不幸的是，这是一个规则在不断变化时实施的结果，但这就是网络发展到现在的程度，有时规范驱动开发，更常见的是网络，浏览器做的很好，后来这是一个规范。

希望一旦规范最终确定，我们将只有border-radius: 12px;。由于Firefox和Chrome推送自动更新（不确定Safari？），这种情况更有可能发生，而IE用户可能永远不会升级。

Answer 2

Compass为Sass提供了many CSS3 properties个mixins，这意味着您可以编写如下内容：

.foo {
    @include border-radius(4px, 4px);
}

将生成以下CSS：

.foo {
    -webkit-border-radius: 4px 4px;
    -moz-border-radius: 4px / 4px;
    -o-border-radius: 4px / 4px;
    -ms-border-radius: 4px / 4px;
    -khtml-border-radius: 4px / 4px;
    border-radius: 4px / 4px;
}

这很好，因为你必须编写更少的代码，但它提供了针对各种浏览器的规则。

Answer 3

border-radius是添加边界半径的官方CSS3规则。但是，正如尼克指出的那样，并非所有浏览器都支持此功能，因此您需要添加适当的版本，以使其在尽可能多的浏览器中运行。

Answer 4

试试这个：http://css3please.com/

Answer 5

对于实际支持CSS 3部分的浏览器，您只需要border-radius。其他属性适用于具有 experimental 实现的浏览器。这些浏览器的较新版本将在其实现和规范稳定时用标准属性替换供应商前缀实验属性。

跨浏览器CSS3规则

5 个答案: