box-shadow没效果最常见原因是元素无实际尺寸或内容，如空div宽高为0或display:inline未设宽高；需确保有width/height、内容撑开盒模型，避免overflow:hidden裁剪，注意参数顺序与单位。
box-shadow 设置阴影时为什么没效果
最常见的原因是元素没有「实际尺寸」或「背景/内容」导致阴影不可见。比如一个空的 <div>，宽高为 0，或者设置了 <code>display: inline 且未设宽高，box-shadow 就不会渲染。
实操建议：
- 先确认元素有明确的
width和height，或至少有内容（文字、图片）撑开盒模型 - 避免对
display: inline元素直接加box-shadow；改用inline-block或block - 检查父容器是否设置了
overflow: hidden，可能把阴影裁掉了 -
box-shadow不影响布局，但会受transform: scale()等影响视觉大小，调试时注意区分
box-shadow 的五个参数怎么配才不晕
box-shadow 标准写法是：box-shadow: h-offset v-offset blur spread color;，其中后两个可选。容易错在顺序和单位混用。
常见错误现象：阴影偏移方向反了、模糊成一片、颜色不显示（漏写了 color）、阴影突然变大（误把 spread 当 blur）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
h-offset和v-offset必须带单位（如2px），负值向左/上偏移 -
blur越大越虚，不能为负；spread为正时扩大阴影范围，为负时收缩，常被忽略但很实用 - 多层阴影用逗号分隔，比如
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08); - 别用
blur=0+spread>0模拟「描边」——它不是真正描边，边缘仍带轻微柔化
text-shadow 和 box-shadow 混用时的坑
text-shadow 只作用于文字内容，且不支持 spread 参数；而 box-shadow 作用于整个盒，两者叠加时容易出现「阴影打架」——比如按钮既有文字阴影又有盒子阴影，看起来过重或发虚。
使用场景差异明显：text-shadow 常用于标题浮雕、文字描边、深色底白字提亮；box-shadow 更适合卡片、按钮、模态框等容器级投影。
实操建议：
-
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);是安全起步值，避免blur > 3px在小字号上糊成一团 - 给
<button></button>同时加两种阴影？先关掉text-shadow，看box-shadow是否已满足层次感 -
text-shadow不触发硬件加速，大量文字用它做动态效果（如 hover 渐变）可能卡顿；优先考虑box-shadow+transition
阴影性能差？可能是 filter: drop-shadow 搞的鬼
很多人听说 filter: drop-shadow() 能绕过盒模型限制（比如给 border-radius 或透明 PNG 投真形阴影），就全局替换 box-shadow，结果滚动变卡、动画掉帧。
根本原因：filter 是全图渲染，浏览器需对整个元素区域做高斯模糊，开销远大于 box-shadow 的合成优化。
实操建议：
- 仅在必须跟随形状（如不规则剪切、SVG 图标、带 alpha 通道的图片）时用
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); - 普通卡片、按钮、输入框，死守
box-shadow—— 它被深度优化，兼容性也好（IE10+） - Chrome DevTools 的「Rendering」面板里勾选「Paint flashing」，能直观看到哪些阴影触发了重绘
阴影看着简单，但 blur 和 spread 的数值微调、filter 与 box-shadow 的适用边界、还有 inline 元素的隐形限制，都是上线前容易跳过的点。
