css - 仅使用 Firefox CSS 来圆角元素？

Question

我刚刚注意到 Stack Overflow 仅使用 Firefox 的 CSS 来圆化首页上用户徽章的角落。这是一个有趣的想法，但仅使用 Firefox 的 CSS（除了那些明显的 CSS 之外）会有哪些缺陷和优势？

-moz-border-radius:6px;
-webkit-border-radius:6px;

上图：用于在 Stack Overflow 首页上圆角的 CSS。

score 6 · Accepted Answer

如我所见，主要问题是您的CSS无法验证。除此之外，我认为没有理由不使用此类平台特定功能，因为它们不会对浏览器不支持这些功能的用户造成任何伤害。

score 3 · Accepted Answer

优点是它比使用角落图像或其他技巧要容易得多。明显的缺点是您的页面无法在 IE 上按预期呈现，世界上超过一半的网络用户仍在使用它。

总体而言，这是情境性的；我想 SO 使用 Firefox 的人比例比平时要高，所以 IE 问题不那么相关。圆角是一个小的视觉改进，所以如果有些人看到而有些人没有看到，这没什么大不了的。

score 2 · Accepted Answer

我什至可以更进一步，将其称为使用 CSS 进行渐进增强的案例。借用理解渐进增强，我认为圆角是巧克力覆盖的花生周围彩色糖果涂层的一部分。

最终 CSS3 将被批准，border-radius将被标准化。-moz,-webkit并且-ms前缀样式可以被删除并替换为它们的标准等效项。您的 CSS 将通过验证，使用不支持 CSS3 的浏览器的用户仍将获得完全可接受的体验，而使用支持 CSS3 的浏览器的用户将获得增强的体验。

或者，除了任何标准之外，您还可以继续使用专有的 CSS 来为更多的受众提供增强的体验。这实际上取决于维护所有 CSS 所需的工作量以及您认为增强体验对您的观众的重要性。

score 1 · Accepted Answer

它适用于 Firefox 和基于 Webkit 的浏览器（尤其是 Safari 和 Chrome）。IE 或 Opera 没有替代品。

使用它的主要原因是当您想要为显示在图案或不可预测背景之上的元素提供圆角时，否则这是不可能的。普通的 CSS 和图像可以处理其他情况。

它也非常容易实现，并且肯定适用于该站点上超过一半的人。

score -1 · Accepted Answer

缺陷当然是它在其他浏览器中不受支持，并且不在 W3C 规范中。

当前的实现很糟糕（在 firefox 和 webkit 中），因为它们不共享语法。

5 回答 5