CSS文本与盒子阴影设置全解析

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS文本与盒子阴影设置全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。