给文字添加描边并不是只有 text-shadow 一种手段。CSS 中有一个专为此场景设计的属性 -webkit-text-stroke，它可以像处理边框一样单独设置文字轮廓的宽度和颜色。该属性最初来自 WebKit 内核，现在多数现代浏览器已经支持。理解它的工作机制后，再配合 text-shadow 可以做出更细腻的描边或发光效果。
不过，这个属性带有前缀，并且在不同浏览器中的表现有差异。实际项目中往往需要将它与阴影模拟、SVG 方案组合使用，才能兼顾视觉一致性与兼容性。下面分别展开。
一、核心属性：-webkit-text-stroke 怎么用
最直接的写法是在选择器中添加 -webkit-text-stroke，它接收两个值：描边宽度和描边颜色。宽度可以用 px、em 等单位，颜色可以是任意 CSS 颜色。比如给白色文字加一圈深灰色描边：
.text-outline {
color: #fff;
-webkit-text-stroke: 2px #333;
}
如果希望分别控制宽度和颜色，还可以使用 -webkit-text-stroke-width 与 -webkit-text-stroke-color 两个子属性。这样做的优势是可以在响应式或主题切换时单独覆盖某个值。需要注意的是，描边是围绕字形轮廓绘制的，当宽度超过一定程度时，描边会向内挤压文字填充区域。也就是说，原本的 color 可能被描边覆盖得只剩很细的一条，甚至完全看不见。这时可以设置 color: transparent，只保留描边轮廓，得到空心字效果。
该属性的局限也比较明显：它只支持实线描边，不能像盒模型边框那样设置虚线、圆角或渐变。同时前缀要求让部分老版本 Firefox 无法生效。因此如果项目需要兼容更广的环境，不能把它作为唯一方案，而应该准备降级写法。
二、text-shadow 模拟描边：原理与多方向阴影
在没有 -webkit-text-stroke 支持的环境中，text-shadow 是最常用的替代方案。文字阴影本身不占布局空间，但可以通过叠加多个方向的阴影，让它们围绕字形展开，形成类似描边的轮廓。核心思路是：为同一个元素设置若干层阴影，每层向不同方向偏移 1px 到 2px，并关闭模糊半径。
.text-shadow-outline {
color: #fff;
text-shadow:
-1px -1px 0 #333,
1px -1px 0 #333,
-1px 1px 0 #333,
1px 1px 0 #333,
-2px 0 0 #333,
2px 0 0 #333,
0 -2px 0 #333,
0 2px 0 #333;
}
这段代码用八个方向的阴影包围文字。方向越多，轮廓越完整；但阴影层数增多会带来两个问题：一是渲染成本升高，尤其是页面中存在大量动画或长文本时；二是如果描边宽度继续加大，仅靠方向层叠加容易出现锯齿和镂空。例如 4px 宽度的描边需要覆盖 16 个以上的方向，并且可能需要使用半像素偏移，代码会迅速膨胀。
相比之下，text-shadow 的优势是兼容性非常好，几乎所有现代浏览器都支持，而且阴影可以带有模糊半径，适合做描边加发光的效果。若只需要 1px 到 2px 的细描边，它通常比前缀属性更省心。要注意的是，阴影颜色默认和文字颜色一致，所以必须显式指定颜色；同时阴影不参与文档流，不会被 overflow 裁剪，但也不会撑开元素尺寸。
三、组合技巧与 SVG 兜底方案
在实际项目中，往往不需要二选一。可以先用 text-shadow 写好兼容样式，然后在支持 -webkit-text-stroke 时覆盖为更清晰的轮廓：
.fallback-outline {
color: #fff;
text-shadow: -1px 0 0 #333, 1px 0 0 #333, 0 -1px 0 #333, 0 1px 0 #333;
}
@supports (-webkit-text-stroke: 2px #333) {
.fallback-outline {
-webkit-text-stroke: 2px #333;
text-shadow: none;
}
}
如果需要更复杂的效果，比如渐变填充加描边，可以组合 background-clip: text 和 -webkit-text-stroke。先把文字填充改为透明，再通过背景裁剪让渐变显示在字形内部，同时保持描边颜色不变：
.gradient-outline {
background: linear-gradient(45deg, #ff6a00, #ee0979);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #222;
}
这种方式在页面标题和海报风格排版中很常见。优点是描边与渐变填充互不干扰，缺点是需要同时使用多个带前缀的属性，并且背景裁剪对透明文字的渲染在不同浏览器中仍有差异。
如果浏览器支持有限，还可以使用 SVG 来彻底绕过 CSS 前缀问题。SVG 的 <text> 元素自带 stroke 和 stroke-width 属性，天生适合做文字描边：
<svg width="300" height="100"> <text x="10" y="50" style="font-size:40px; font-weight:bold;" stroke="#333" stroke-width="2" fill="#fff">CSS描边</text> </svg>
这里的 stroke 控制描边颜色，stroke-width 控制描边宽度，fill 控制文字填充色。把 SVG 作为独立资源或内联到 HTML 中都能生效。它的缺点是不够灵活，需要维护矢量文本，不适合大量动态文本，但在图标字体或特定标题场景下非常可靠。
综合来看，如果只照顾现代浏览器，可以优先使用 -webkit-text-stroke；如果需要兼容老版本 Firefox，保留 text-shadow 模拟；若设计稿要求非常精确或存在渐变，可以用 SVG 或组合属性实现。这样根据项目场景选择，文字描边就不会再成为样式中的老大难问题。
CSS文字描边text-stroke文字描边方案修改时间：2026-09-28 16:58:59