Question

你好！

我注意到有些网站正在使用-moz-border-radius来获取元素的圆角？这是一个好习惯吗？它有任何缺点吗？

Answer 1

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

唯一的问题是IE8不支持圆角。但它在所有其他浏览器中看起来都不错。

Answer 2

使用border-radius（以及它的浏览器特定的朋友-moz-border-radius和-webkit-border-radius）是获取元素圆角的最简单策略。因为这种方法是标准兼容的（并且不需要丑陋的黑客，例如带有背景的定位元素），所以这是最好的方法。

有关-moz和-webkit之间的区别，请参阅this page at css3.info。 This page还包含更多有关它的信息。

Answer 3

是的，border-radius被视为良好做法。它肯定是很多比混乱的JQuery更糟糕的东西，或者更糟糕的是，一组角落图形 - 所有替代方案都有重大问题，从不可扩展到破坏你的背景。 border-radius是纯CSS，没有这些问题。

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

不支持它的一个浏览器是IE，最高版本8（IE9将支持它，但尚未发布）。好消息是IE有一个非常好的小黑客增加了对border-radius（以及其他一些功能）的支持，甚至对IE6这样的旧版本也是如此。

黑客被称为CSS3Pie，如果您想使用此功能，非常值得一看。这意味着您可以使用像border-radius这样的现代CSS3功能，而不必过分强调您的IE用户。

Answer 4

<强>在哲学

border-radius的CSS属性是在网站上任何位置实现圆角的最佳方式之一。 IMO是最好的方式。

虽然所有浏览器/版本都不支持border-radius，但我喜欢在几乎所有圆角都有用的情况下坚持使用此属性，因为圆角是一种装饰性功能，因此不是必需的在不受支持的情况下，通常也不值得使用基于图像的效果的额外带宽，甚至是像CSS3Pie这样的javascript hack。

这遵循网页设计的“渐进增强”理论基础。拥有支持border-radius的现代浏览器的用户可以看到它们，而其他用户则看不到。但是边界半径通常不是可访问性或可用性的问题，因此通过CSS实现是95％的最佳路径。

<强>实际上

在实践中，使用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/ 有关供应商支持，如何使用速记等的一些其他信息

好/坏使用-moz-border-radius

4 个答案: