CSS3怎么实现文字描边效果_textstroke属性用法【方法】

-webkit-text-stroke 是唯一被主流浏览器支持的文字描边方式，因原生 text-stroke 未标准化且未被任何引擎实现；Chrome、Edge、Safari 支持该前缀属性，Firefox 完全不支持，需搭配 -webkit-text-fill-color: transparent 使用，参数为 width color 且顺序不可颠倒。

-webkit-text-stroke 是目前唯一被主流浏览器支持的文字描边实现方式，原生 text-stroke（无前缀）尚未进入 CSS 标准，所有现代浏览器都不识别它。

为什么直接写 text-stroke 没效果？

因为该属性从未被正式标准化，CSS Text Decoration Level 4 草案中曾提出 text-stroke，但至今未被任何浏览器引擎实现。你看到的“有效果”，几乎全是靠 -webkit-text-stroke 这个私有前缀属性撑起来的。

• Chrome、Edge、Safari：支持 -webkit-text-stroke（包括宽度和颜色）
• Firefox：完全不支持该属性，连前缀版也不认
• 使用时必须搭配 -webkit-text-fill-color: transparent 才能显出纯描边效果（否则文字本体颜色会覆盖描边）

-webkit-text-stroke 的参数怎么配？

它接受两个值：width 和 color，顺序不能反，也不能只写一个：

-webkit-text-stroke: 2px #ff6b6b;

• width 支持 px、em、rem，但不推荐用相对单位，容易在缩放或响应式下失控
• color 支持任意合法颜色值（hex、rgb()、hsl()、transparent），但设为 transparent 就等于没描边
• 不能和 text-shadow 混用实现“伪描边”——那只是多层阴影叠加，边缘毛糙、性能差、不可控

Firefox 下怎么 fallback？

没有等效的原生属性，只能换思路：

• 用 text-shadow 模拟（4 方向各 1px）：

  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000;

  但注意：这在斜体或字体较细时易露白边，且无法控制描边圆角
• 用 SVG 替代 DOM 文字，通过 stroke + fill="none" 真正实现描边，兼容性好，但丧失语义和可访问性
• 服务端/构建时生成带描边的图片文字（仅限静态标题），不推荐用于正文

真正跨浏览器稳定的文字描边，目前只有 SVG 路径级控制能做到；CSS 层面的 -webkit-text-stroke 是实用妥协，但得时刻记得它在 Firefox 里是彻底失效的——别指望加个 @supports 就能兜住。