使用-moz-border-radius好还是不好？

Question

你好！

我注意到一些网站使用 -moz-border-radius 来实现元素的圆角效果。这是一个好的做法吗？它有什么缺点吗？

- Banshee

Answer 1

我建议添加“-webkit-border-radius”以覆盖Safari和Chrome，同时添加“border-radius”以覆盖CSS3标准。

唯一的问题是IE8不支持圆角。但在所有其他浏览器中都很漂亮。

- user571545

---

好的答案，+1。一些JavaScript库，如jQuery UI，特别指出了这个问题。（并以相同的方式处理它。） - JasCav

+1，请确保对于所有无聊的<IE8用户，它看起来仍然很好，直角也是如此。我曾经遇到过文字换行略有不同的情况。 - Ben L.

谢谢，但是您的意思是我应该在同一个CSS类中同时使用-moz-border-radius、-webkit-border-radius和border-radius吗？ - Banshee

把这三个属性放在同一个类中。 - Gabriel

@SnowJim - 是的，请指定所有的变体，标准的 border-radius 放在最后。 - Spudley

Answer 2

使用border-radius（以及它的浏览器特定朋友-moz-border-radius和-webkit-border-radius）是在元素上获得圆角的最简单策略。因为这种方法符合标准（不需要丑陋的hack，如具有背景的定位元素），所以它是最好的方法。

有关-moz和-webkit之间的差异，请参见css3.info上的此页面。此页面还包含一些更多信息。

- yorick

Answer 3

哲学上

border-radius是实现网站各处圆角的最佳方式之一，在我看来，它是最好的方法。

尽管并非所有浏览器/版本都支持border-radius，但我喜欢在几乎所有有利于使用圆角的情况下坚持使用这个属性，因为圆角是一种装饰性功能，因此在不支持圆角的情况下并不重要，并且通常不值得使用基于图像的效果或甚至CSS3Pie这样的javascript hack来消耗额外带宽。

这遵循了web设计中“渐进增强”的理念。支持border-radius的现代浏览器用户可以看到它们，而其他用户则不能看到。但是，圆角通常不涉及辅助功能或可用性问题，因此95%的情况下，通过CSS实现是最佳方案。

实际上

实际上，使用border-radius需要跨越大多数现代浏览器支持的三个属性。

div {
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

首先，border-radius是CSS3规范中列出的实际属性，有一天它将成为实际实现的规则。但在广泛采用和确定规范之前，您仍然需要包括供应商特定的前缀-moz-（Mozilla Firefox）和-webkit-（Google Chrome和Apple Safari浏览器）。 资源 http://border-radius.com/ 根据您希望应用的值和要圆角的角落，生成正确的规则/简写版本。非常方便。 http://www.css3.info/preview/rounded-border/ 关于供应商支持、如何使用简写等的其他信息。

- Joel Glovier

Answer 4

是的，border-radius 被视为良好的实践。它绝对比其他替代方案(例如混乱的JQuery代码或更糟糕的角落图形)要好得多——所有这些替代方案都存在主要问题，从不可扩展性到弄乱你的背景等问题。而 border-radius 是纯 CSS 的，没有这些问题。

唯一不使用它的原因是浏览器缺乏支持。然而除了 IE，现在所有主要浏览器都支持 border-radius。有些仍需要使用像 -moz- 这样的供应商前缀，所以你需要指定它几次，但在所有浏览器中，其功能基本相同。

唯一不支持它的浏览器是IE，直到版本8为止 (IE9将支持它，但尚未发布)。好消息是，有一个非常好的小技巧可以让IE支持 border-radius （还有其他一些功能），即使是类似于IE6的旧版本也可以。

这个技巧叫做 CSS3Pie，如果您想使用此功能，它绝对值得一看。这意味着您可以使用现代的 CSS3 功能，如 border-radius，而不必太担心您的IE用户。

- Spudley