【CSS】Border 边框
总结
1. 基本属性
- border-width: 设置边框的粗细
- border-color: 设置边框的颜色
- border-style: 设置边框的类型
（1）简写语法：border: border-width border-style border-color
注意：三个属性的顺序任意，个数任意，但是这三个属性中必须要有 “border-style”。
（2）对边框的四条边分别设置不同的属性，以style为例：
border-top-style: /*设置元素顶部边框类型*/
border-right-style: /*设置元素右边边框类型*/
border-bottom-style: /*设置元素底部边框类型*/
border-left-style: /*设置元素左边边框类型*/另一种写法：
border-style: solid;
/* 一个值时，表示四条边都是solid类型 */
border-style: solid dotted;
/* 两个值时，第一个值表示上下边框的类型，第二个值表示左右边框的类型 */
border-style: solid dotted dashed;
/* 三个值时，第一个值表示上边框的类型，第二个值表示左右边框的类型，第三个值表示下边框的类型 */
border-style: solid dotted dashed inset;
/* 四个值时，依次代表上右下左边框 */2. 边框类型
| 属性值 | 功能描述 |
| none | 定义无边框 |
| dotted | 定义点状边框 |
| dashed | 定义虚线边框 |
| solid | 定义实线边框 |
| double | 定义双线。双线的宽度等于border-width的值。 |
| inherit | 规定从父元素继承边框样式（部分浏览器不支持这个属性值） |
3. 圆角边框属性
- border-radius
（1）对边框的四条边分别设置圆角：
border-top-left-radius:
/* 两个值时分别代表圆角的水平半径和垂直半径 */
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
另一种写法：border-radius 的四个值是按照 top-left、top-right、bottom-right 和 bottom-left 顺序来设置的。
border-radius:{1}设置一个值时，四个圆角的效果一样；
border-radius:{2}设置两个值时，top-left=bottom-right=第一个值，top-right=bottom-left=第二个值；
border-radius:{3}设置三个值时，第一个值设置top-left，第二个值设置top-right和bottom-left，第三个值设置bottom-right；
border-radius:{4}设置四个值是，就按顺序设置样式。（2）border-radius 的值：如果存在反斜杠符号 “/”，“/” 前面的值是设置圆角的水平方向半径，“/”后面的值是设置圆角的垂直方向的半径；如果没有 “/”，则圆角的水平和垂直方向的半径值相等。
4. 盒子阴影属性
- box-shadow
（1）box-shadow 的语法规则：
/*设置盒子一条边的阴影效果*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ]
/*设置盒子多条边的阴影效果,用逗号隔开*/
box-shadow：none | [ inset x-offset y-offset blur-radius spread-radius color ],[ inset x-offset y-offset blur-radius spread-radius color ]注意：
【1】 设置盒子少于四条边的阴影效果：
1）不设置模糊半径 或 模糊半径为 “0” ，不设置扩展半径 或 扩展半径为 “0”，表现正常
2）设置模糊半径不为 “0” ，不设置扩展半径 或 扩展半径为 “0”，其余边也会有阴影，不是我们想要的效果
3）设置模糊半径不为 “0” ，设置扩展半径不为 “0”，表现正常
即：两个参数要么都不设置 或 为“0”，要么都设置为非 “0” 。
示例1：设置一条边
box-shadow: -5px 0 5px red;
box-shadow: -5px 0 5px -4px red;修正：
示例2：设置两条边
box-shadow: -5px 0 5px red, 0 5px 5px blue;
修正：
box-shadow: -5px 0 5px -4px red, 0 5px 5px -4px blue;
【2】设置盒子四条边的阴影效果：
如果设置四条边，那么上面说的限制就没有了，如下所示：
box-shadow: -5px 0 5px red, 0 5px 5px blue, 5px 0 5px green, 0 -5px 5px orange;
（2）box-shadow 的参数：
| 参数 | 名称 | 描述 | |
| 1 | none | 默认值 | 没有任何阴影效果 |
| 2 | inset | 阴影类型 | 可选值。如果不设置，其默认的投影方式是外阴影；如果取其唯一值 “inset”，就是给元素设置内阴影。 |
| 3 | x-offset | 阴影水平偏移量 | 可取正负值。如果取正值，则阴影在元素的右边，反之，在左边。 |
| 4 | y-offset | 阴影垂直偏移量 | 可取正负值。如果取正值，则阴影在元素的底部，反之，在顶部。 |
| 5 | blur-radius | 阴影模糊半径 | 可选参数。只能取正值。如果取值为“0”，表示阴影不具有模糊效果；如果取值越大，阴影的边缘就越模糊。 |
| 6 | spread-radius | 阴影扩展半径 | 可选参数。可取正负值。如果取正值，则阴影都延展扩大，反之，则缩小。 |
| 7 | color | 阴影颜色 | 可选参数。如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，建议不要省略这个参数。 |
参考：
CSS3边框
END