paint-order仅对svg元素生效，html文本设置无效；在svg中设paint-order:stroke可使描边视觉上变细偏外，因填充覆盖描边内侧一半；需同时设置fill、stroke及足够stroke-width（≥4px），且不可与-webkit-text-stroke混用。
paint-order 只对 SVG 生效，HTML 普通文本设了也没用
直接在 <p></p> 或 <h1></h1> 上写 paint-order: stroke，浏览器根本不会解析——这不是 bug，是 CSS 规范明确限定的：它只作用于 SVG 图形元素。DevTools 里能看到声明，但“Computed”面板里找不到该属性，渲染也完全没变化。想让文字描边视觉上“偏外、变细”，必须把文字放进 <svg></svg>，用 <text></text> 标签包裹，且同时设置 fill 和 stroke。
为什么 paint-order: stroke 能让描边看起来“变细”
本质不是描边真的变细了，而是绘制顺序改变后，填充盖住了描边内侧一半：
-
stroke-width始终是居中绘制的（比如stroke-width: 4px，左右各 2px） -
paint-order: stroke表示先画描边，再画填充 - 填充层覆盖在描边层之上，正好吃掉描边靠近文字中心的那 2px
- 剩下外侧 2px 露出来，视觉上就是“描边变细 + 偏向外侧”
所以 stroke-width 至少得 ≥ 4px，否则被盖掉一半后只剩 0.5px，肉眼根本看不出“外露”效果。
常见踩坑：和 -webkit-text-stroke 混用完全无效
有人试图在同一个元素上既写 -webkit-text-stroke 又写 paint-order，结果必然失败：
-
-webkit-text-stroke是 WebKit/Blink 专属，只对 HTML 文本生效，走的是私有文本渲染通道 -
paint-order是 SVG 渲染管线里的属性，只对<text></text>等 SVG 元素起作用 - 二者根本不共存：你在 SVG
<text></text>里写-webkit-text-stroke，浏览器直接忽略；在 HTML<p></p>里写paint-order，同样被忽略 - 真要兼容老浏览器，
text-shadow模拟描边（8 方向）仍是唯一通用方案，但边缘锯齿和描边不贴合字形的问题无法根治
真正生效的最小可运行 SVG 示例
以下代码能稳定产出“外描边”效果：
<svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"><text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="48" font-weight="bold" fill="#fff" stroke="#000" stroke-width="6" paint-order="stroke">Hello</text></svg>
关键点：缺一不可——<svg></svg> 容器、<text></text> 标签、显式 fill 和 stroke、paint-order: stroke。漏掉任意一个，就回到默认描边压在填充上的“胖头鱼”效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
