仅使用Firefox CSS如何将元素的边角变为圆形?

3

我刚刚注意到,Stack Overflow在首页上使用Firefox only CSS来圆角用户徽章。这是一个有趣的想法,但使用Firefox only CSS会有什么优缺点(除了明显的优点)?

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

上面是在 Stack Overflow 首页上用于圆角的 CSS。

似乎也适用于 Webkit... - recursive
1
而且你必须记住,我们这些只有IE6的人是毫不知情的! - Traingamer
5个回答

6

我认为主要问题在于您的CSS无法验证。除此之外,我认为使用这种特定于平台的功能没有任何问题,因为它们不会对那些不支持该功能的浏览器的用户造成任何伤害。


+1:表达了我想要更优雅地表达的意思(带有有效性声明)。 - Henry B

3
优点在于它比使用角落图片或其他技巧要容易得多。明显的缺点是,您的页面在IE上无法按预期渲染,而IE仍被全球超过一半的网络用户使用。
总的来说,这取决于情况;我想SO会有比通常更高比例的人使用Firefox,因此IE问题不那么相关。圆角是一个小的视觉改进,所以如果一些人看到它,一些人不看到,那没什么大不了的。

IE问题始终是一个相关的话题,当人们只使用IE功能时,你(火狐用户)有抱怨过吗? - Henry B
1
“无法使用页面”和“某些框的角落多了3个像素”之间存在显着差异。” - DNS
@PintSizedCat:IE的彩色滚动条? - Sam Becker
它总是从一些小事开始的。此外,这是原则问题。 - Henry B
无论如何,正如我所说,使用非标准的CSS是一个劣势,并且它是相关的。对于SO来说,这可能比msn.com更不相关。 - DNS
显示剩余2条评论

2

我同意BeefTurkey的观点。

我甚至可以进一步称之为使用CSS进行渐进增强的一个案例。借用理解渐进增强中的话,我认为圆角是巧克力花生糖包裹外面的彩色糖衣。

最终,CSS3将被批准,border-radius将被标准化。可以删除带有-moz-webkit-ms前缀的样式,并用它们的标准等效物替换。你的CSS将验证通过,那些不支持CSS3的浏览器的用户将仍然拥有完全可接受的体验,而使用支持CSS3的浏览器的人将获得一个更好的体验。

或者,你可以继续使用专有的CSS,以及任何标准,为更大的受众提供更好的体验。这将取决于维护所有CSS所需的努力程度以及你认为增强体验对你的受众有多重要。


1

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

使用它的主要原因是当您想要为显示在具有图案化或不可预测背景上的元素提供圆角时,否则不可能实现。正常的CSS和图像可以处理其他情况。

它也非常容易实施,并且肯定对这个网站上的一半以上的人有效。


-1

缺点当然是它不受其他浏览器支持,也不在W3C规范中。

当前的实现很糟糕(无论是在Firefox还是Webkit中),因为它们不共享语法。


Border-radius是W3C规范的一部分:http://www.w3.org/TR/css3-background/#the-border-radius它直接来自这些供应商特定的实现。 - Scott Reynen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接