box-shadow
box-shadow 是 CSS 的一个属性，用来在元素的边框盒（border box）周围绘制一层或多层阴影，常用于制造立体感、悬浮层次，或柔化卡片、按钮的边缘。它是纯视觉效果，不改变元素本身的尺寸和位置。
取值顺序为 box-shadow: 水平偏移 垂直偏移 模糊半径 扩展半径 颜色，其中模糊半径、扩展半径和颜色可省略；加上 inset 关键字则由外阴影变为内阴影。几个要点：
- 用逗号分隔可叠加多层阴影，先写的层显示在上面；
- 阴影会自动贴合元素的
border-radius圆角； - 模糊半径不能为负，扩展半径可为负（用来收缩阴影范围）。
常见误区：阴影不占布局空间，不会把周围元素挤开，也可能被祖先的 overflow: hidden 裁掉。另外它只沿矩形（含圆角）边界描边，若元素是透明 PNG 或不规则形状，想让阴影贴合真实轮廓，应改用 filter: drop-shadow()。
常见问题
box-shadow 和 filter: drop-shadow() 有什么区别？
box-shadow 只沿元素的矩形边框盒（含圆角）画阴影，且不影响布局；drop-shadow 会依据元素实际的不透明像素轮廓生成阴影，适合透明图片或不规则形状。两者用途不同，不能简单互换。
为什么我的 box-shadow 不显示或被切掉了？
最常见的原因是某个祖先元素设置了 overflow: hidden，把溢出的阴影裁剪掉了。其次可能是偏移量太小、或颜色透明度太低看不清，检查父容器的 overflow 和阴影颜色的 alpha 值即可。
怎么让阴影看起来更柔和自然？
适当加大模糊半径、降低颜色不透明度（如 rgba(0,0,0,0.1)），并叠加多层不同距离的阴影来模拟真实光照，而不是用单层很深的纯黑阴影。