使用firefox只有CSS来圆角元素?

时间:2009-03-30 13:23:07

标签: css firefox rounded-corners

我刚刚注意到Stack Overflow仅使用Firefox来围绕首页上的用户徽章的角落。这是一个有趣的想法但是使用Firefox只有CSS的缺点和优势(除了明显的明显之外)?

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

上图:用于在Stack Overflow首页上转角的CSS。

5 个答案:

答案 0 :(得分:6)

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

答案 1 :(得分:3)

优点是它比使用角落图像或其他技巧容易得多。显而易见的缺点是,您的页面无法按照预期呈现,IE仍然被全球一半以上的网络用户使用。

总体而言,它是情境化的;我认为使用Firefox的人比例通常高,因此IE问题并不那么重要。圆角是一个小小的视觉改善,所以如果有人看到它而有些人看不到,那就不是那么大了。

答案 2 :(得分:2)

我同意BeefTurkey

我甚至可以进一步称之为Progressive Enhancement with CSS。为了从Understanding Progressive Enhancement大量借用,我认为圆角是巧克力覆盖的花生周围多彩糖果涂层的一部分。

最终CSS3将被批准,border-radius将被标准化。 -moz-webkit-ms前缀样式可以删除并替换为其标准等效项。您的CSS将验证,并且使用不支持CSS3的浏览器的人仍然具有完全可接受的体验,使用支持CSS3的浏览器的人将获得增强的体验。< / p>

另外,除了任何标准之外,您还可以继续使用专有CSS,为更多的受众提供增强的体验。这实际上取决于维护CSS所需的努力程度以及您对受众的增强体验的重要性。

答案 3 :(得分:1)

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

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

实施起来也非常容易,并确实适用于本网站超过一半的人。

答案 4 :(得分:-1)

陷阱当然是在其他浏览器中不受支持,而在W3C规范中则不支持。

当前实现很糟糕(在firefox和webkit中),因为它们不共享语法。