CSS如何实现文字描边效果_采用text-stroke属性设定颜色

作者：袖梨 2026-07-24

-webkit-text-stroke 在 Chrome、Safari 和基于 Chromium 的 Edge 中可用，Firefox 完全不支持；需用 text-shadow 模拟或 SVG 实现兼容，且 color 与描边叠加时描边覆盖文字，空心字须设 color: transparent。

text-stroke 在哪些浏览器里能用

text-stroke 是 CSS 的非标准属性（目前仍处于 Editor’s Draft 阶段），实际支持依赖 -webkit-text-stroke 前缀。它在 Chrome、Safari、Edge（基于 Chromium 后）中稳定可用，Firefox 完全不支持——连前缀版本都不认。

这意味着：如果你的项目必须兼容 Firefox，-webkit-text-stroke 单独使用是无效的，得准备降级方案。

Chrome 时可用 -webkit-text-stroke: 2px #000
Safari 同样只认 -webkit- 前缀版本
Firefox 会直接忽略该声明，文字按普通样式渲染（无描边）
不能写成 text-stroke: 2px #000（无前缀的标准写法当前无效）

描边颜色和粗细怎么设才不出错

-webkit-text-stroke 接收两个值：width 和 color，顺序固定，不能颠倒，也不能只写一个。

正确写法：-webkit-text-stroke: 1.5px #ff6b6b
错误写法：-webkit-text-stroke: #ff6b6b（缺宽度，整条声明被丢弃）
错误写法：-webkit-text-stroke: 1.5px（缺颜色，同样失效；默认不是 transparent，而是“未定义”，结果不可控）
宽度支持 px、em、rem，但避免用 pt 或百分比（渲染不一致）

注意：描边是绘制在文字轮廓上，不是外扩阴影。当描边过粗（如 >4px）且文字本身较细时，容易“吃掉”内部填充色，看起来像实心块——这时需配合 color: transparent 才能显出纯描边效果。

立即学习“前端免费学习笔记（深入）”；

Firefox 兼容不了怎么办

没有原生支持，就只能用替代方案。最常用的是 text-shadow 模拟描边，虽然不够精确，但兼容性拉满（IE9+ 都行）。

单层 text-shadow 效果弱，建议用 8 个方向的偏移组合：text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, ...
更稳妥的做法是用 PostCSS 插件（如 postcss-text-stroke）自动补全 text-shadow 回退代码
若需高质量描边（比如图标字体或 SVG 文字），直接改用 <svg><text> + stroke 属性，完全可控且跨浏览器

别试图用 outline 或 border 模拟——它们作用于盒模型，对内联文本无效，且无法贴合字形轮廓。