css3边框

border属性是css盒子模型基础属性之一。
css3中添加的border属性

border-color
border-image
border-radius
border-shadow
一、 border-radius

兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

语法：

1
border-radius: none | {1,4} [/ {1,4}] ?
　解析：

　　四个值的顺序为：top-left、top-right、bottom-right、bottom-left（即顺时针顺序）

　　如果反斜杠’/’存在，若’/’存在，则前面的值设置为元素圆角的水平半径，后面的值为垂直方向的半径

 如果不存在，则圆角的水平方向的半径和垂直方向的半径相等。 length设置的主要有如下四个场景：

　　border-radius：length{1}　　top-left、top-right、bottom-right、bottom-left四个值相等。
　　border-radius: length{2}　　top-left、bottom-right取第一个值，top-right、bottom-left取第二个值。
　　border-radius: length{3}　　top-left第一个值，top-right、bottom-left 第二个值 ，bottom-right第三个值
　　border-radius: length{4}　　top-left第一个值，top-right 第二个值 ，bottom-right第三个值，bottom-left第四个值
　　none： 默认值，表示没有圆角

　　派生出来的子属性：

　　border-top-left-radius: []?

　　border-top-right-radius: []?

　　border-bottom-right-radius: []?

　　border-bottom-left-radius: []?

　　实例：

　　不规则圆角边框

1
2
3
4
5
6
.radius{
background:#ddd;
width:300px;
height:300px;
border-radius:100px 80px 60px 40px / 50px 40px 30px 20px;
}
二、box-shadow

可以使用一个或者多个投影，如果多个投影，中间用逗号隔开

语法：box-shadow: none | [inset x-offset y-offset blur-radius spread-radius],[inset x-offset y-offset blur-radius spread-radius]

　参数解析：

　　none：默认值，无任何阴影效果。

　　inset：阴影类型，可选值，不设置默认为外阴影，唯一值为inset，设置内阴影

　　x-offset：阴影水平偏移量，其值可以是负数，也可以是整数，如果为去正值，阴影在元素的右边，反之，在元素的左边。

　　y-offset：阴影垂直偏移量，其值也可以是负数，如果取整数，阴影在元素的底部，反之在元素的上部。

　　blur-radius：阴影模糊半径，可选参数，只能为正值，值越大边缘就更模糊。

　　spread-radius：阴影扩展半径，可选参数，可以为正负值，如果为正值，整个阴影都延展扩大，反之，整个阴缩小。

　　浏览器兼容：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性

　　实例：

　　单边阴影

1
2
3
4
5
width:200px;
height:100px;
border:1px solid #ccc;
box-shadow: 0px 4px 5px -3px red;
margin:20px;
box-shadow不会算到盒子模型中，会占据边框之外的位置
注，border、阴影、背景的层级关系如下：边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上

层级关系

1
2
3
4
5
6
7
8
9
div{
width:100px;
height:100px;
border:12px solid blue;
background-color:orange;
border-top-left-radius:60px 90px;
border-bottom-right-radius:60px 90px;
box-shadow:64px 64px 24px 40px rgba(0,0,0,0.4),12px 12px 0 18px rgba(0,0,0,0.4) inset;
}