唯一跨浏览器可靠方案是text-shadow，需用4–8层0模糊阴影模拟描边；-webkit-text-stroke更精准但仅限WebKit内核且Firefox不支持。
直接用 text-shadow 是唯一跨浏览器可靠方案
Bootstrap 本身不提供文字描边类，也别指望 .shadow-sm 这类盒子阴影能用在文字上——它会给整个元素加一层毛边阴影，文字边缘糊成一团，且无法控制偏移或粗细。
真正能用的只有原生 text-shadow，它在 IE9+、Firefox、Chrome、Safari、Edge 全平台生效。但注意：这不是描边，是靠多层无模糊（blur-radius 必须为 0）的偏移阴影“堆”出来的视觉效果。
- 1px 描边写法：
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; - 2px 描边需补中间四向：
0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;（共 8 层，小屏设备渲染压力明显上升） - Windows 上 ClearType 开启时容易出灰边；macOS 更干净，但 ≤14px 小字号下仍可能糊成块
- 字母 “o”、“e” 等内凹字形会漏阴影，形成双环怪效果，这是原理决定的，没法绕过
-webkit-text-stroke 在 Chrome/Safari 里效果更准，但 Firefox 完全不认
如果你只跑在 Chrome 或 Safari 上，-webkit-text-stroke 是更优解：它直接作用于字形轮廓，支持 0.5px 描边（Chrome 115+），没有堆叠感，也不会漏进字母内圈。
但必须写全前缀，只写 text-stroke: 2px #000 无效；Firefox 从没实现过该属性，旧版 Edge（EdgeHTML）也不支持，连 @supports 都检测不到。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
-webkit-text-stroke: 2px #333;，若同时设color但未设-webkit-text-stroke-color，描边会继承文字色，容易误判“没生效” - 和
background-clip: text; color: transparent;混用时，Safari 可能触发渲染异常（文字闪烁或描边断裂） - 不支持虚线、渐变、端点样式等任何高级控制，纯色 + 固定粗细 + 居中位置
- 描边会让文字视觉宽度变大，尤其
font-weight: 300+ 描边 >1.5px 时，可能撑破max-width或在 flex 中意外换行
在 Bootstrap 项目里怎么安全加描边类
别用内联样式（style="text-shadow: ..."），维护性差还容易被覆盖；也别给 .btn、.alert 这类组件全局加描边——它们已有背景、边框、阴影，叠加后显脏。
推荐两种落地方式：
- 自定义 class 写法：
.text-stroke-lg { text-shadow: 2px 2px 0 #000; }，确保这个 class 声明顺序在 Bootstrap CSS 之后，否则会被.fw-bold等覆盖 - Sass 用户可用 mixin：
@mixin text-stroke($width: 1px, $color: #000) { text-shadow: -$width -$width 0 $color, $width -$width 0 $color, -$width $width 0 $color, $width $width 0 $color; }，再配合 Bootstrap 断点做响应式粗细 - 数字类文本（如计时器、价格）建议优先用
-webkit-text-stroke+@supports渐进增强，再 fallback 到text-shadow
描边会让文字实际占用空间变大，这点常被忽略
text-stroke 和 text-shadow 都不改变 font-metrics，但视觉宽度确实增加。盒模型里 box-sizing: border-box 对它完全无效——描边不参与布局计算。
真正有效的补偿手段只有两个：
- 微调
letter-spacing（比如-0.02em），适合中等字号 - 缩小
font-size（比如0.5px），适合固定像素场景，但要注意 Windows 下 subpixel 渲染限制 - 对
display: inline文字加描边时，尤其要检查是否导致父容器高度突变或基线错位
