bootstrap不提供文字阴影工具类，必须手写text-shadow；shadow-sm等作用于盒模型，不影响文字边缘，真正生效的是直接作用于字体渲染层的text-shadow。
Bootstrap 本身不提供文字阴影的工具类，text-shadow 必须手写 CSS 实现；所谓“响应式阴影”，核心是让 text-shadow 的偏移和模糊值随字号缩放，而不是靠媒体查询硬切。
为什么 shadow-sm 等类对文字无效
shadow-sm、shadow 这些类作用于元素的盒模型（box-shadow），它会在整个标题容器外画一层投影，完全不影响文字本身的边缘渲染。把 shadow-lg 加在 <h1 class="display-2 shadow-lg"></h1> 上，阴影是围在整块 <h1></h1> 外框的，文字在深色背景上依然发虚、可读性差。
- 真正控制文字边缘的是
text-shadow，它直接作用于字体渲染层，和color同级 - 别用
filter: drop-shadow()替代——Chrome 下小字号会毛刺，抗锯齿失效 -
text-shadow不受 Bootstrap 的!important规则影响，但容易被加载顺序覆盖
怎么写 text-shadow 才能响应式缩放
关键不是“加两层阴影”，而是让所有参数（水平偏移、垂直偏移、模糊半径）都用相对单位（rem 或 em），这样当 font-size 在断点中变化时，阴影自动同比例缩放，不会在小屏下糊成一团。
- 推荐写法：
text-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.2)（即 0 1px 2px，但用 rem） - 双层更稳（尤其配图片背景）：
text-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 -1px 1px rgba(255,255,255,0.1) - 在
@media (max-width: 768px)中只需重设font-size，阴影自动变细；不要单独调text-shadow值 - 避免
blur-radius > 0.25rem，细体字（font-weight: 300）建议 ≤ 0.1rem
如何避免真机上阴影“看不见”或“发虚”
iOS Safari 对 text-shadow 的 subpixel 渲染较弱，Windows 高对比度模式下默认禁用——这些不是你代码写错了，而是浏览器策略。必须提前绕过。
- 别对按钮内文字加
text-shadow：按钮已有 focus outline 和 hover 反馈，额外阴影干扰状态识别 - WCAG 对比度检测工具（如 Lighthouse）完全忽略
text-shadow，只算文字色与背景色的 RGB 差值；阴影再好看，该调对比度还得调 - 小字号（≤16px）慎用垂直偏移（
v-offset），iOS 上易出现锯齿；优先用水平+模糊组合 - 如果标题叠加在图片/渐变背景上，务必加半透明遮罩层（
<div class="hero-overlay">），否则阴影会被背景吞掉 <p>真正难的不是写出那行 <code>text-shadow，而是测试真机——模拟器看不出 iOS 的 subpixel 锯齿，也测不出 Windows 高对比度下的阴影消失。写完必须拿 iPhone 和 Surface Pro 实机点开看。
