text-shadow仅作用于文字内容，不支持inset且无法影响背景或边框；box-shadow支持inset、spread-radius及多层阴影，但需注意渲染顺序与性能限制。
text-shadow 只作用于文字内容，不能给元素加边框或背景加阴影
很多人误以为 text-shadow 能让整个按钮或卡片带阴影，其实它只渲染在 textContent 上。哪怕你给 <div> 写了 text-shadow，只要里面没文字（比如只有 <img> 或空格），就完全看不到效果。
常见错误现象：text-shadow: 2px 2px 4px #000; 写在容器上却没反应——先检查是否真有可渲染的文字节点。
-
text-shadow支持多个阴影用逗号分隔，例如：text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff; - 第三个参数是模糊半径，设为
0时无模糊，适合做文字描边 - 不支持
inset关键字，无法做出“内阴影”文字效果 - 性能影响极小，但大量使用多层阴影 + 高模糊值，在低端设备上可能触发重绘延迟
box-shadow 的 spread-radius 容易被忽略，但它决定阴影大小扩张
box-shadow 的四个长度参数顺序是：offset-x offset-y blur-radius spread-radius。前三个较常被理解，第四个 spread-radius 控制阴影边缘向外（正数）或向内（负数）扩展的量，直接影响阴影“厚薄”感。
典型误用：想让卡片阴影更饱满，只调大 blur-radius，结果边缘发虚、边界不清；其实加一点正的 spread-radius（如 2px）能让阴影更扎实。
立即学习“前端免费学习笔记（深入）”；
- 负的
spread-radius可模拟“内嵌卡片”效果，但需配合overflow: hidden防止阴影溢出 -
box-shadow支持inset，这是text-shadow不具备的关键能力 - 多个阴影用逗号分隔，但注意绘制顺序：靠前的阴影在下层，靠后的在上层
- 避免对动画元素频繁修改
box-shadow（尤其含blur-radius），会强制触发全层重绘，改用transform+ 简单阴影更流畅
同时用 text-shadow 和 box-shadow 时，层级关系是固定的
渲染顺序从底层到顶层依次是：元素背景 → box-shadow（含 inset）→ 内容（包括文字）→ text-shadow。这意味着 text-shadow 总是浮在 box-shadow 之上，不可能被盒子阴影盖住。
这个顺序不可更改，CSS 中没有 z-index 控制阴影层级。如果想让文字“陷进”阴影里，只能换思路：比如用 inset box-shadow 模拟凹陷容器，再配浅色文字+微弱 text-shadow 做层次，而不是指望把文字阴影压到盒子阴影下面。
- 不要试图用
z-index调整阴影显示顺序——无效 -
伪元素（如
::before）可以叠加额外阴影层，作为绕过限制的实操手段 - 导出设计稿时，设计师给的“文字压在阴影上”效果，前端实现时得拆解成容器
inset box-shadow+ 文字text-shadow组合
/* 示例：卡片内凹 + 文字轻微外凸 */
.card {
background: #fff;
box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
}
.card h2 {
color: #333;
text-shadow: 0 1px 0 #fff;
}移动端适配中，blur-radius 过大会导致阴影锯齿或消失
iOS Safari 和部分安卓 WebView 对高斯模糊有硬性限制，blur-radius 超过 30px 可能被截断或直接不渲染。这不是 bug，而是渲染引擎为省电做的妥协。
更隐蔽的问题：用 rem 或 % 设置模糊值，在视口缩放或系统字体放大时，可能导致阴影突然变糊或消失。稳妥做法是统一用 px，且控制在 0–24px 区间。
- 响应式场景下，可用媒体查询降级：
@media (max-width: 768px) { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } - 避免在
position: fixed元素上用大box-shadow，某些安卓机型会触发闪烁 - 测试时务必真机打开“减少动画”和“增大字体”两个系统设置，看阴影是否仍稳定
实际项目里，最常被卡住的不是语法写错，而是忘了 text-shadow 不吃空白符、box-shadow 的 spread-radius 默认为 0、以及 iOS 对模糊值的静默截断。这三个点调一次就能省掉半天排查时间。
