css文本阴影与盒子阴影_text-shadow与box-shadow设置_技术教程

text-shadow仅作用于文字内容，不支持inset且无法影响背景或边框；box-shadow支持inset、spread-radius及多层阴影，但需注意渲染顺序与性能限制。

text-shadow 只作用于文字内容，不能给元素加边框或背景加阴影

很多人误以为 text-shadow 能让整个按钮或卡片带阴影，其实它只渲染在 textContent 上。哪怕你给 写了 text-shadow，只要里面没文字（比如只有或空格），就完全看不到效果。

常见错误现象：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 对模糊值的静默截断。这三个点调一次就能省掉半天排查时间。