css3属性之边框圆角、背景与渐变

css3之圆角、背景及渐变

border-radius

兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera

border-radius 属性允许我们为元素添加圆角边框，是一个最多可指定四个 border -*- radius 属性的复合属性。拆开来就是 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

1、方向及各数量的值

每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。

• 设置一个值时，很好理解，四个角都是这个值
• 设置两个值时，采用对角线相等的原则（参考margin、padding）。例如， border-radius: 50px 0px; 则左上和右下为50px，右上和左下为0。
• 设置三个值时，根据对角线原则，第四个值会与第二个值相等。例如， border-radius: 5px 10px 15px; 则左上、右上、右下、左下分别为5px、10px、15px、10px

2、数值表示

数值有三种表示方法：px、%、em：

• px：例如 50px，即为半径为50px的圆放在这个元素边框所呈现的弧度。假设现在这个元素高、宽为100px，那就成了圆。
• %：将这个百分数乘以高、宽得到两条半径，以这两条半径在该元素内画椭圆，就能得到这个弧度。

注意：画圆时设置px的话，应该根据元素的实际宽高，而不只是width\height。

3、完整结构

w3c：border-radius: 1-4 length|% / 1-4 length|%;

比如我们上面写的border-radius : 50px，根据定义完整的写法应该是：border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px;

“/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径。根据水平半径和垂直半径的值，可以形成一个椭圆或者圆形，然后再根