应直接使用 CSS 的 text-shadow 属性实现文字阴影，因其原生支持、控制精准且避免 Bootstrap 盒子阴影误用；推荐通过自定义 class 或 Sass mixin 统一管理，注意可访问性与渲染兼容性。
用 text-shadow 直接加阴影，别碰 Bootstrap 自带类
bootstrap 本身不提供文字阴影的工具类（比如没有 text-shadow-sm 这种东西），强行找会浪费时间。真正靠谱的做法是手写 css 的 text-shadow 属性，它原生支持所有现代浏览器，且控制粒度远超任何框架封装。
常见错误现象：有人试图用 shadow 相关类（如 shadow-sm）套在文字上——那其实是给整个元素盒子加阴影，文字边缘会糊成一团，而且无法调阴影偏移、模糊度或颜色。
-
text-shadow格式固定：text-shadow: <em>h-offset</em> <em>v-offset</em> <em>blur-radius</em> <em>color</em>;，例如text-shadow: 1px 1px 2px rgba(0,0,0,0.3); - 如果文字底色浅（如白字），建议用半透黑色；深色文字则可用浅灰或白色阴影提升可读性
- 避免设过大的
blur-radius（比如 >4px），否则在小字号下文字会发虚，尤其在 Windows 渲染中更明显
在 Bootstrap 项目里怎么写才不冲突
直接在 class 里写内联样式最危险（style="text-shadow: ..."），维护性差还容易被覆盖。推荐两种稳妥方式：
- 复用已有语义类，比如给
<h1>加自定义 class：<h1 class="display-4 text-shadow-lg">标题</h1>，再在 CSS 中定义.text-shadow-lg { text-shadow: 2px 2px 4px rgba(0,0,0,0.4); } - 如果用 Sass（Bootstrap 官方推荐），可以基于变量写 mixin：
@include text-shadow($level: lg)，让阴影值和$spacers或$font-size关联，保持设计系统一致性 - 注意 CSS 优先级：自定义 class 要比 Bootstrap 的
.fw-bold、.text-muted等更靠后声明，否则可能被覆盖
移动端和高对比度模式下的坑
文字阴影在某些场景下不是锦上添花，而是减分项：
- Windows 高对比度模式下，
text-shadow默认会被浏览器忽略——这不是 bug，是 WCAG 合规行为。如果阴影用于传达关键信息（比如状态标识），必须换用其他视觉通道（颜色、图标、边框）替代 - iOS Safari 对
text-shadow的 subpixel 渲染较弱，小字号（1px 时容易出现锯齿，建议测试真机 - 不要对
button内文字加阴影：按钮已有焦点 outline 和 hover 反馈，额外阴影干扰用户对交互状态的判断
要不要用 filter: drop-shadow() 替代
可以，但不推荐用于纯文字。因为 filter: drop-shadow() 是对整个元素渲染层做后期处理，会导致文字抗锯齿失效（尤其在 Chrome 下），小字号文字边缘发毛。
它适合用在图标、SVG 或卡片这类有明确轮廓的元素上，而不是 <span> 或 <p>。
真实项目里最容易被忽略的点：阴影不是装饰开关，而是可访问性开关。加之前先问一句——去掉它，用户还能不能准确识别内容层级和状态？如果答案是否定的，那就不是加阴影的问题，是设计本身需要调整。
