CSS 阴影：光影效果

CSS 阴影

box-shadow 语法

box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色;

/* 经典卡片阴影 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

/* Neo-Brutalism 风格 */
box-shadow: 8px 8px 0 #000;

/* 内阴影 */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

/* 多层阴影 */
box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.1),
  0 4px 12px rgba(0, 0, 0, 0.05);

text-shadow

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

阴影层数越多越自然。Google Material Design 就用了多层阴影。