Ronnie 猫's 一亩三分地

关注前端技术,一直走在追随前端的路上…For Long Time

CSS3:border-radius详解

CSS3里面有border-radius这个属性,大大的简化了前端工程师们在开发圆角的难度(默认忽视IE6–IE8)

下面就对CSS3中的border-radius属性解释:
border-radius的含义是:圆角。

border-radius:(Number)px (Number)px (Number)px (Number)px;

-webkit-border-radius:(Number)px (Number)px (Number)px (Number)px;

-moz-border-radius:(Number)px (Number)px (Number)px (Number)px;

解释:左上,右上,右下,左下。

写法实例:
-moz-border-radius:10px 10px 10px 10px;

-webkit-border-radius:10px 10px 10px 10px;

border-radius:10px 10px 10px 10px;

单独写某几个圆角写法如下:

(以-moz和-webkit为例)
-moz-border-radius-topleft:20px;

-moz-border-radius-bottomright:20px;

-webkit-border-top-left-radius:20px;

-webkit-border-bottom-right-radius:20px;

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google+ photo

You are commenting using your Google+ account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s