📖 CSS阴影知识

box-shadow 语法

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color

• offset-x / offset-y：水平/垂直偏移量，负值向左/上偏移
• blur-radius：模糊半径，值越大越模糊，0 为硬边
• spread-radius：扩散半径，正值扩大，负值收缩
• inset：内阴影，从边框向内投影

text-shadow 语法

text-shadow: offset-x offset-y blur-radius color

文字阴影不支持 spread 和 inset，但同样支持多层叠加。

多层阴影

多个阴影用逗号分隔，先写的在上层。可以利用多层阴影创建轮廓、浮雕、霓虹灯等复杂效果。

性能提示

• 阴影会触发重绘（repaint），避免在动画元素上使用
• 使用 filter: drop-shadow() 可获得更好的渲染性能
• 多层阴影对性能影响较大，建议不超过 3 层