box-shadow生效需元素有渲染盒：设置宽高、背景色或为块级元素；参数为水平偏移、垂直偏移、模糊半径和颜色；图片需设display:block，文字用text-shadow；多层阴影用逗号分隔，inset实现内阴影。
box-shadow 属性怎么写才生效
直接加 box-shadow 但没效果？大概率是元素没尺寸、没背景色，或者被其他样式覆盖。它只作用于「有渲染盒」的元素——比如设置了 width/height、padding，或本身是块级元素（div、section）且内容撑开了高度。
最简能生效的写法：
div {
width: 200px;
height: 100px;
background: #fff;
box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}-
2px：水平偏移（正数向右，负数向左） -
2px：垂直偏移（正数向下，负数向上） -
4px：模糊半径（不能为负；值越大阴影越虚） -
rgba(0,0,0,0.2)：阴影颜色（推荐用 rgba 控制透明度，避免硬边）
为什么阴影不显示在图片或文字上
box-shadow 是给「盒子」加的，不是给内容加的。如果对 img 元素直接加，得先确保它不是内联元素默认行为干扰——加 display: block 或 display: inline-block，再设宽高或 vertical-align 避免基线留白。
对文字加阴影要用 text-shadow，和 box-shadow 完全无关：
立即学习“前端免费学习笔记（深入）”；
h1 {
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}- 参数顺序和
box-shadow类似，但没有「扩展半径」项 - 不能用
inset，也不支持多层逗号分隔（除非你真写多组） - 别对大段正文滥用，会影响可读性和渲染性能
多个阴影怎么叠、怎么调层级
用英文逗号分隔多组值，从左到右绘制顺序是「由远到近」，也就是后写的阴影会盖在先写的上面：
div {
box-shadow:
0 0 10px rgba(255,0,0,0.3), /* 底层红晕 */
0 0 20px rgba(0,0,255,0.2); /* 上层蓝晕，更虚更宽 */
}- 想做「内阴影」就加
inset关键字，例如：inset 0 2px 4px rgba(0,0,0,0.1) -
inset和外阴影可以共存，但注意叠加后可能视觉混乱 - 阴影不会触发
overflow: hidden的裁剪，要隐藏溢出得包一层父容器并设overflow: hidden
移动端适配和性能提醒
阴影在低端 Android 或老 iOS 上可能渲染异常，尤其是模糊值 >10px 或多层叠加时。真要兼容，建议：
- 模糊半径控制在
6px以内，偏移量用整数 - 避免在
:hover或transition中动态改box-shadow的模糊值——这会触发重绘，卡顿明显 - 用
will-change: box-shadow前要三思，多数情况没必要，反而增加内存开销 - 深色模式下记得同步调阴影颜色透明度，否则可能看不清
阴影看着简单，但实际调试时最容易漏掉的是「元素有没有真正生成盒模型」和「颜色透明度是否合理」。这两个点卡住，再调参数也没用。
