你好!
我注意到一些网站使用 -moz-border-radius
来实现元素的圆角效果。这是一个好的做法吗?它有什么缺点吗?
你好!
我注意到一些网站使用 -moz-border-radius
来实现元素的圆角效果。这是一个好的做法吗?它有什么缺点吗?
我建议添加“-webkit-border-radius”以覆盖Safari和Chrome,同时添加“border-radius”以覆盖CSS3标准。
唯一的问题是IE8不支持圆角。但在所有其他浏览器中都很漂亮。
哲学上
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/
关于供应商支持、如何使用简写等的其他信息。border-radius
被视为良好的实践。它绝对比其他替代方案(例如混乱的JQuery代码或更糟糕的角落图形)要好得多——所有这些替代方案都存在主要问题,从不可扩展性到弄乱你的背景等问题。而 border-radius
是纯 CSS 的,没有这些问题。border-radius
。有些仍需要使用像 -moz-
这样的供应商前缀,所以你需要指定它几次,但在所有浏览器中,其功能基本相同。border-radius
(还有其他一些功能),即使是类似于IE6的旧版本也可以。border-radius
,而不必太担心您的IE用户。
border-radius
放在最后。 - Spudley