border 相关

线型

线型值	意义
solid	实线
dashed	虚线
dotted	点状线

边框三要素可以拆分成小属性

小属性	意义
border-width	线宽
boder-style	线型
border-color	线颜色

四个方向的边框

属性	意义
border-top	上边框
border-right	右边框
border-bottom	下边框
border-left	左边框

四个方向边框的三要素小属性

例: border-top-width 上边框宽度

用 border 生成一个三角

.box1 {
	width:0px;
	height:0px;
	border: 20px solid transparent;
	border-top-color: red;
}

border-radius 单独设置四个圆角

	border-radius: 10px 20px 30px 40px; /* 左上，右上，右下，左下 */

单独设置四个圆角

属性	意义
border-top-left-radius	左上角
border-top-right-radius	右上角
border-bottom-left-radius	左下角
border-bottom-right-radius	右下角

box-shadow 属性

box-shadow: 10px 20px 30px rgba(0,0,0,.4) /* x偏移量，y偏移量，模糊量，颜色 */

阴影延展

在模糊量后面添加的一个值为阴影的延展值

box-shadow: 10px 20px 30px 10px rgba(0,0,0,.4) /* x偏移量，y偏移量，模糊量，延展值，颜色 */

内阴影

在前面加上 inset 即设置为内阴影

box-shadow: inset 10px 20px 30px rgba(0,0,0,.4) /* 内阴影，x偏移量，y偏移量，模糊量，颜色 */

多阴影

box-shadow 属性值可以用逗号隔开多个，表示携带多个阴影

box-shadow: 10px 20px 30px red, 2px 5px 20px blue, inset 5px 9px 20px green