CSS3 border-radius详解

有两种方法设置元素的各个拐角

1.使用边界半径的所对应的各个展开式属性，分别设置四个拐角。

边框左上角半径左上角

边框右上角半径右上角

边框左下角半径左下角

边框右下角半径右下角

2.使用边界半径简写属性，从左上角开始以顺时针顺序应用到元素的各个拐角。

border-radius：1-4长度 | ％ / 1-4长度 | ％ ;

说明：

•  拐角半径的长度可以用实际长度px em等，也可以用百分比％来表示。
• 斜杠前的值代表四个角的水平半径，斜杠后值代表四个角的垂直半径。
• 当四个角为圆角的时候，水平半径和垂直半径相等。可以简写为border-radius：1-4 length | ％
• 当需要设置椭圆形角时，需要分别四个角的水平半径和垂直半径，中间用斜杠分隔.border-radius：1-4 length | ％ / 1-4长度 | ％
• 设置四个角的值时，如果省略左下角，则与右上相同。如果省略下偏右，则与左上方相同。如果省略右上方，则与左左相同。

 

示例：

圆形圆角：

a 分别给四个角设置不同大小的圆角

border-radius：10px 20px 30px 40px;

b 设置对角大小一样的圆角

border-radius：10px 40px 10px 40px;

简写为： border-radius：10px 40px; 

C.设置右上角和左下角一样的圆角

border-radius：10px 50px 30px 50px

简写为： border-radius：10px 50px 30px

d。给四个角设置大小一样的圆角

border-radius：10px 10px 10px 10px;

简写为：边界半径：10px的;

椭圆圆角

e.当给四个角提供不同的水平和垂直半径。在斜杠前指定1-4个值，斜杠后指定另一个1-4个值。即可形成椭圆圆角。

border-radius：10px 10px 10px 10px / 20px 20px 20px 20px;

简写为：border-radius：10px / 20px;

f. 当水平半径和垂直半径一致时，就变成了圆形圆角。

border-radius：10px / 10px;

简写为我们熟悉的边界半径：10px的;

更多应用实例详见博文“ CSS3 border-radius应用实例 ”