多重阴影CSS

box-shadow基础语法

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径blur | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径blur | 阴影扩散半径spread | 阴影颜色 */
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 {
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%), //往下画一条线
    0 8px 0 -3px #f6f6f6, // 往下7往内3-扩散
    0 9px 1px -3px rgb(0 0 0 / 20%), //再往下画一条线
    0 16px 0 -6px #f6f6f6,// 往下7往内6-扩散
    0 24px 0 -9px #f6f6f6, 
    0 17px 1px -6px rgb(0 0 0 / 20%),
    0 25px 1px -9px rgb(0 0 0 / 20%),
    0 30px 20px -9px rgb(0 0 0 / 15%)
}