CSS3圆角属性

2009年8月21日 发表评论 阅读评论

面对CSS3的到来,IE依旧还是众矢之的。如果IE总是跟不上网页开发前进的步伐,它中有一天会被人们所遗忘。下面来所下如何修改网页CSS,使得网页能够在Firefox,Chrome,Safari实现圆角效果

在多个浏览器中实现圆角,可以使用下面的CSS语句:

-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

下面来解释下这些语句。

一、先来说一下在Firefox中应用CSS3圆角属性:

-moz-border-radius: {1,4} | inherit

如果你想设置四个角都是一样圆角的话,可以像这样子直接设置-moz-border-radius:5px;

也可以单独设置元素的上左、上右、下右、下左四个角的值,分别用-moz-border-radius-topleft、-moz-border- radius-topright、-moz-border-radius-bottomright、-moz-border-radius- bottomleft来设置。

也可以用合并起来一句话分别给四个角设置,如只设置上左、下右:-moz-border-radius:3px 0 3px 0;

二、再来说下chrome、Safari这两个webkit内核浏览器如何实现CSS圆角:

实现方法如下:

-webkit-border-radius:{1,2} | inherit;

如果你是想设置四个角都是一样圆角,直接设置成-moz-border-radius:3px;

如果十分别和四个角设置,可以用下面的语句:

-webkit-border-top-left-radius:5px 10px; 
-webkit-border-top-right-radius:5px 10px; 
-webkit-border-bottom-right-radius:5px 10px;
-webkit-border-bottom-left-radius:5px 10px;

但是不能像Firefox那样直接一句话给四个角分别设置,例如使用“-webkit-border-radius:3px 0 3px 0;”将不会有任何效果。

三、结束语:

其实,CSS3的圆角属性还是非常方便的,这样我们可以不用修改图片实现圆角效果,但是,在IE下,CSS3的一些效果似乎都会歇菜,所以,如果你很在意在IE下的实现效果,建议还是将图片也改成圆角的。

好了,CSS3圆角效果就介绍到这里。欢迎您继续关注青柠檬,我将为您呈现更多精彩内容。

http://it.dengchao.org
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: CSS3圆角属性
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.