«
»

纯CSS圆角实现(except IEs)

mienflying 发表于 19. Dec. 2008 分类： Design | Tags: & & | 2 条评论 »

Firefox特有的浏览器CSS功能之一就是”-moz-border-radius”属性集。-moz-border-radius属性允许你创建圆角元素——纯CSS。

这个border-radius属性是CSS3新增属性之一。Firefox的这个特性同时支持Firefox2和Firefox3。

和Firefox一样，Webkit也允许开发者创建纯CSS圆角，这在所有的基于Webkit引擎的浏览器里面都是可以实现的，包括苹果的Safari(只有3)和Google的Chrome。

现在就请看一下，在这些浏览器里面用纯CSS创建圆角是多么的容易吧！（不幸的是，可怜的IE在短时间内，不会支持CSS圆角。）

另外，Firefox3.1b2版本已经支持CSS3原生的border-image属性，但尚不支持原生的border-radius，所以仍然需要用-moz-。

CSS代码：

全部圆角   -moz-border-radius/-webkit-border-radius
坐上角      -moz-border-radius-topleft/-webkit-border-top-left-radius
右上角      -moz-border-radius-topright/-webkit-border-top-right-radius
左下角      -moz-border-radius-bottomleft/-webkit-border-bottom-left-radius
右下角      -moz-border-radius-bottomright/-webkit-border-bottom-right-radius

我发现，Firefox的写法更接近于CSS3。

CSS圆角演示

PS:你可以点击上面的链接查看演示，然后用Firebug查看HTML源代码。

您或许会喜欢：

如果您喜欢本文，您可以对本文发表评论 或 订阅本站 以获取本站最新动态。

2 个评论

  • skyblue 发表于 December 30, 2008 at 03:27

    就只有FF可用
    opera都不行..

    Reply
  • riant 发表于 December 30, 2008 at 15:16

    不知道对图片支不支持

    Reply

发表评论