4.3 盒子阴影
box-shadow 设置元素的阴影
box-shadow:<length>① <length>②;
box-shadow:<length>① <length>② <color>;
box-shadow:<length>① <length>② <length>③;
box-shadow:<length>① <length>② <length>③ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color>;
box-shadow:<length>① <length>② <length>③ <length>④ <color> inset;
box-shadow:<length>① <length>② inset;
取值:
none: 无阴影
<length>
①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>
②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>
③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<length>
④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值<color>
: 设置对象的阴影的颜色。 inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
可以设定多组效果,每组参数值以逗号分隔
test .outset {
box-shadow: 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-blur {
box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
}
.test .outset-extension {
box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
}
.test .inset {
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
}
.test .multiple-shadow {
box-shadow:
0 0 5px 3px rgba(255, 0, 0, .6),
0 0 5px 6px rgba(0, 182, 0, .6),
0 0 5px 10px rgba(255, 255, 0, .6);
}