bootstrap本身不提供文字阴影类，其.display-*标题在深色背景下需手动添加text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.2)提升可读性；使用时须注意对比度、背景复杂度、css优先级、响应式调整及高对比度模式兼容性。
text-shadow语法和Bootstrap默认值怎么对应
Bootstrap本身不直接提供文字阴影的CSS类，所谓“Bootstrap文字阴影效果”其实是开发者手动用text-shadow模仿其设计语言中标题/按钮的轻微立体感。官方源码里几乎没用text-shadow，但它的.display-*系列标题在深色背景上常需加一层浅灰阴影来提升可读性。
标准写法是：text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.2);。这个值接近Bootstrap 5文档示例中.display-4在深色主题下的视觉补偿逻辑——注意单位用rem而非px，才能随根字体缩放；透明度控制在0.1–0.3之间，太浓会像描边，太淡无作用。
哪些场景必须加text-shadow，哪些反而该禁用
不是所有文字都适合加阴影。核心判断依据是对比度和背景复杂度：
- 深色文字+浅色纯色背景（如
#fff）→ 通常不需要text-shadow，加了反而模糊字形 - 浅色文字+深色背景（如
#212529或图片背景）→ 必须加，否则边缘发虚，尤其小字号时 - 文字叠加在渐变/纹理/半透明卡片上 → 单层阴影不够，建议用两层：
text-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 -1px 1px rgba(255,255,255,0.1);（下压+高光） - 使用
font-weight: 300或细体字时 → 阴影扩散半径要缩小到0.05rem，否则字干被吃掉
和Bootstrap类组合使用的常见错误
直接在.h1或.fw-bold上叠text-shadow容易失效，因为Bootstrap的某些工具类（如.text-white）带!important，可能覆盖你写的text-shadow。更稳妥的方式是：
- 用自定义类名（如
.text-shadow-sm），并确保CSS加载顺序在Bootstrap之后 - 避免写
.h1.text-shadow-sm这种组合选择器，改用嵌套：.text-shadow-sm { text-shadow: 0.05rem 0.05rem 0.1rem rgba(0,0,0,0.15); } - 如果用Sass，直接在
_variables.scss里扩展$headings-color相关变量，而不是硬写内联样式 - 响应式断点里记得重置：比如
@include media-breakpoint-down(md)中把text-shadow的blur-radius减半，否则小屏上看不清
性能和可访问性容易被忽略的细节
text-shadow本身开销极低，但滥用会触发浏览器重绘，尤其配合transform动画时。真正要注意的是两点：
- 屏幕阅读器不感知
text-shadow，但它会影响WCAG对比度检测工具的判定——工具只认文字色与背景色的RGB差值，阴影不算。所以别指望靠阴影“补足”对比度缺口，该调文字色还得调 - Windows高对比度模式下，
text-shadow会被强制禁用，此时要靠forced-colors: active媒体查询兜底：@media (forced-colors: active) { .text-shadow-sm { text-shadow: none; } } - 不要对整个
body设全局text-shadow，哪怕只是0 0 1px——它会让所有文字边缘轻微晕染，在Retina屏上尤其明显
最常被漏掉的是多语言排版：阿拉伯文、中文竖排、孟加拉语等文字的text-shadow垂直偏移方向要重新校准，不能照搬拉丁字母的0.1rem 0.1rem。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
