box-shadow 能在纯色背景、简单形状等场景完全替代图片阴影，但不规则轮廓或多层混合模式仍需 background-image 或 SVG；其语法顺序为水平偏移、垂直偏移、模糊半径、扩展半径、颜色，模糊值不能为负，缺颜色则整条声明失效。
box-shadow 能否完全替代图片阴影？
可以，但得看场景。纯色背景、简单形状、不需要复杂纹理或半透明渐变边缘时，box-shadow 不仅能替代，而且更轻量、可缩放、易维护。一旦涉及不规则轮廓（比如毛玻璃边缘、手绘感投影）、多层混合模式（如 multiply 叠加在纹理图上），还是得用 background-image 或 SVG。
基础 box-shadow 语法和常见翻车点
box-shadow 的五个参数顺序不能错：水平偏移、垂直偏移、模糊半径、扩展半径、颜色。最容易出错的是把模糊值设为负数（无效）或漏掉颜色（浏览器会忽略整条声明）。
- 模糊半径为
0时，阴影是硬边矩形——不是“没阴影”，而是没柔化 - 扩展半径为正数会让阴影整体放大，负数则收缩；但超出元素边界的部分会被父容器
overflow: hidden截断 - 多个阴影用逗号分隔，渲染顺序从左到右，后写的在底层（类似图层叠放）
- 内阴影必须显式写
inset关键字，否则默认是外阴影
示例：box-shadow: 2px 2px 8px -1px rgba(0,0,0,0.2), 0 0 0 4px rgba(0,0,0,0.05); —— 第一层是常规偏移阴影，第二层是均匀包裹的细边框式阴影。
响应式阴影适配与性能注意
阴影本身不触发重排，但模糊半径过大（尤其 >30px）+ 高频动画（如 transform 连用）可能在低端设备引发掉帧。别用 box-shadow 做「动态模糊拖尾」效果。
立即学习“前端免费学习笔记（深入）”；
- 用
prefers-reduced-motion媒体查询降级动画中的阴影变化：@media (prefers-reduced-motion: reduce) { .card { transition: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } } - 移动端慎用大范围扩散阴影（如
0 0 40px rgba(0,0,0,0.3)），部分 Android WebView 渲染异常或发虚 - 如果需要随字体大小缩放阴影（比如按钮），优先用
em或rem单位，而非固定px
替代图片阴影时的兼容性底线
IE10+ 支持标准 box-shadow，IE9 及以下完全不支持。如果你的项目还要求兼容 IE9，就别强行替代——老式 PNG 阴影图虽然重，但稳定。现代项目（Chrome/Firefox/Safari/Edge 79+）可放心用，连 inset 和多层阴影都无压力。
真正容易被忽略的是：阴影不会影响元素的盒模型尺寸，但会溢出父容器。如果父元素没设 overflow: visible 或足够内边距，阴影会被裁掉——这不是 bug，是规范行为。
