css3边框
border属性是css盒子模型基础属性之一。
css2中border的属性
- border-width 边线宽度
- border-style 边框类型（必须有）
- border-color 边框颜色
css3中添加的border属性
- border-color
- border-image
- border-radius
- border-shadow
一、 border-radius
兼容性：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
语法：
border-radius: none | <length>{1,4} [/ <length>{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: <length> [<length>]?
border-top-right-radius: <length> [<length>]?
border-bottom-right-radius: <length> [<length>]?
border-bottom-left-radius: <length> [<length>]?
实例：
不规则圆角边框
.radius{
background:#ddd;
width:300px;
height:300px;
border-radius:100px 80px 60px 40px / 50px 40px 30px 20px;
}
效果如下 ：
只设置左上圆角：
.radius{
background:#ddd;
width:300px;
height:300px;
border-top-left-radius:150px 70px;
}
效果如下：
圆形
.radius{
background:#ddd;
width:300px;
height:300px;
border-radius:150px;
}
半圆形
.radius{
background:#ddd;
width:300px;
height:150px;
border-radius:0 0 150px 150px;
}
扇形
.radius{
background:#ddd;
width:150px;
height:150px;
border-bottom-left-radius:150px;
}
椭圆
.radius{
background:#ddd;
width:300px;
height:150px;
border-radius:150px / 75px;
}
二、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 属性
实例：
单边阴影
width:200px;
height:100px;
border:1px solid #ccc;
box-shadow: 0px 4px 5px -3px red;
margin:20px;
效果
四边阴影(设置模糊半径)
div{
width:200px;
height:100px;
border:1px solid #ccc;
box-shadow: 0px 0px 10px red;
margin:20px;
}
四边阴影(设置扩展半径),可利用扩展半径做边框，box-shadow不会算到盒子模型中，会占据边框之外的位置
div{
width:200px;
height:100px;
border:1px solid #ccc;
box-shadow: 0px 0px 0px 10px red;
margin:20px;
}
内阴影
div{
width:200px;
height:100px;
border:1px solid #ccc;
box-shadow: inset 0px 0px 5px red;
}
多层阴影
div{
width:200px;
height:100px;
border:1px solid #ccc;
box-shadow: -5px 0px 5px red, 0px 5px 5px blue,5px 0 5px green,0 -5px 5px orange;
}
多层边框
div{
width:200px;
height:100px;
border:1px solid #ccc;
box-shadow: 0 0 0 1px red, 0 0 5px blue,0 0 0 8px green,0 0 0 12px yellow,0 0 0 16px orange;
}
注，border、阴影、背景的层级关系如下：边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上
层级关系
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;
}
