最可靠方式是给主要内容容器（如或.container）设box-shadow；避免写在body/html上；基础用0 4px 12px rgba(0,0,0,0.1)，慎用大blur值，注意与border-radius协同。
直接用 box-shadow 给容器元素加外阴影
最常用、最可靠的方式就是给容器（比如 <div class="container">）设置 <code>box-shadow。它不依赖文字内容，也不受 inline 元素限制，适用于任何块级或 flex/grid 容器。
常见错误是把 box-shadow 写在 body 上——当页面内容高度超过视口时，阴影只渲染到视口底部，滚动后就“断了”。真正该加阴影的，是包裹主要内容的那个容器元素（如 <main></main> 或带 class="container" 的 <div>）。
<p>实操建议：</p>
<ul>
<li>基础柔和阴影：<code>box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)（偏移小、模糊适中、透明度低）
spread 值，例如 box-shadow: 0 6px 16px 2px rgba(0, 0, 0, 0.08)
blur > 24px）导致边缘发虚，尤其在小屏或高DPI设备上更明显html 或 body 直接设 box-shadow，除非你明确控制了它们的高度和 overflow 行为
box-shadow 参数调不好？先盯住这三组值
box-shadow 的语法顺序固定：h-offset v-offset blur spread color inset，其中前两个是必需的，其余可省略。容易出错的地方不是记不住参数名，而是没理解它们之间的相互影响。
典型问题场景：
- 阴影“飘”在元素上方或左边：检查
h-offset和v-offset是否用了负值（比如-4px 0会让阴影向左偏） - 阴影太“硬”或太“散”：优先调
blur（3–12px 较安全），spread仅在需要扩大/收窄阴影范围时才动（±2px 足够） - 内阴影误用：加
inset后阴影会出现在容器内部，适合卡片凹陷效果，但和“发光”“浮起”类需求完全相反 - 多层阴影写法：用逗号分隔，例如
box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08)，注意浏览器仍按顺序逐层绘制，不要堆叠超过 3 层
需要内阴影或裁剪式发光？换思路，别硬套 box-shadow
如果目标是“文字描边发光”或“容器内部压暗”，box-shadow 就不是最优解。它本质是盒模型的投影，无法绕过背景色或穿透透明区域。
替代方案要按效果选：
- 要文字边缘高亮（如霓虹灯）：
background-clip: text+ 渐变背景 +text-shadow或box-shadow包裹伪元素 - 要容器内部暗角（模拟纸张凹陷）：用
inset配合多层深色阴影，例如box-shadow: inset 0 2px 8px rgba(0,0,0,0.05), inset 0 -2px 8px rgba(255,255,255,0.3) - 要绕过圆角/透明区域投柔光：改用
filter: drop-shadow()，但它作用于整个元素轮廓，且 IE 完全不支持
移动端和高DPI设备上阴影突然变糊或消失？
这不是 bug，是渲染机制差异。iOS Safari 和部分 Android WebView 对大 blur 值（>16px）会降采样，导致模糊失真；Windows 高DPI缩放下，像素值未做 rem/rem/vw 适配也会让阴影看起来“太细”或“太粗”。
务实对策：
- 用
rem或vw替代固定px值，例如box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,0.1) - 对关键容器加
transform: translateZ(0)强制硬件加速，缓解 Safari 重绘卡顿 - 别指望在 1px 边框容器上做出 20px 模糊阴影——视觉比例崩了，用户只会觉得“不对劲”，而不是“高级”
border-radius 的协同。圆角越大，越要同步加大 blur 和 spread，否则阴影会像贴纸一样生硬地挂在圆角外侧。
