box-shadow详解
css
/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影,以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
/* 继承父节点的阴影设置 */
box-shadow: inherit;
/* 使用默认阴影设置 */
box-shadow: initial;
/* 如果父节点有阴影设置则继承父节点的设置,否则清除阴影设置 */
box-shadow: unset;
阴影模糊半径: 取值只能为正值,值取 0 时,表示阴影不具有模糊效果。值越大,阴影的边缘就越模糊。
阴影扩散半径: 取值可以为正值或负值。若为正值,则整个阴影都延展扩大,反之缩小。