理解 CSS 阴影
掌握 CSS box-shadow 属性。学习偏移、模糊、扩散和颜色，创建精美的阴影效果。
box-shadow 语法
box-shadow: offset-x offset-y blur spread color;box-shadow 属性用于为元素添加阴影效果。它可以接受多个值来控制阴影的外观。
参数详解
offset-x5px水平偏移（正值向右）
offset-y5px垂直偏移（正值向下）
blur10px模糊半径（值越大越模糊）
spread0扩散半径（正值扩大）
colorrgba(0,0,0,0.2)阴影颜色
insetinset内阴影（可选）
实用示例
基础阴影
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);内阴影
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);多层阴影
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);Material Design 阴影
box-shadow: 0 10px 20px rgba(0,0,0,0.19),
0 6px 6px rgba(0,0,0,0.23);可视化演示
Subtle
Medium
Strong
Dramatic
相关工具
阴影生成器
可视化生成阴影效果