paint-order 仅对 SVG 元素（如 ）生效，HTML 文本（如 ）设置无效；必须在 SVG 中用 标签，同时声明 fill 和 stroke 才能通过 paint-order: stroke 实现外描边效果。
paint-order 只对 SVG 元素生效，不能直接用于 HTML 普通文本（如 <p></p>、<h1></h1>）。想让文字描边“露在外侧”，必须把文字写在 <svg></svg> 里，用 <text></text> 标签包裹。
为什么普通 HTML 文本设了 paint-order 没反应
浏览器会忽略它——这不是 bug，是规范限制。CSS 规范明确要求 paint-order 仅适用于 SVG 图形元素（<circle></circle>、<rect></rect>、<text></text> 等），不作用于 HTML 渲染树中的文本节点。
- 你在
<div> 或 <code><p></p>上写paint-order: stroke fill，DevTools 里能看到该声明，但计算样式中不会出现，也不影响渲染 - 即使配合
-webkit-text-stroke使用，也无效：前者管 SVG 绘制顺序，后者管 HTML 文本的私有描边，二者不在同一渲染通道 - 常见误判：看到 Chrome 控制台没报错，就以为生效了；实际得看最终视觉效果是否符合“描边被填充盖住一半”或“描边只出现在外缘”
- 基础写法：
text { fill: #fff; stroke: #000; stroke-width: 4; paint-order: stroke; }→ 先画描边，再画填充，文字主体清晰，描边只显现在轮廓外侧 - 若写
paint-order: fill，等同于normal（默认），描边会压在填充上，粗描边时文字可能被吃掉 -
paint-order: stroke fill和paint-order: stroke效果一致；CSS 解析时会自动补全剩余项为默认顺序 - 注意
stroke-width是居中绘制的，所以paint-order: stroke后，填充会覆盖描边内半部分，视觉上描边变细、偏外，这才是“外描边”本质 -
-webkit-text-stroke是 WebKit/Blink 专属，只对 HTML 文本有效，且描边永远居中、不可偏移，也无法通过paint-order调序（因为没这个属性） - 有人尝试在 SVG
<text></text>里同时写stroke和-webkit-text-stroke，结果是后者被忽略——SVG 文本走的是 SVG 渲染管线，不认这个私有前缀 - 真要兼顾兼容性：HTML 文本用
text-shadow模拟描边（多方向阴影），SVG 文本用paint-order做高保真外描边，二者分场景使用，不混搭
SVG <text></text> 中正确使用 paint-order
必须满足三个条件：SVG 容器 + <text></text> 标签 + 同时设置 fill 和 stroke。顺序才可调。
和 -webkit-text-stroke 混用的坑
别把两者套在同一段文本上试图“叠加控制”。它们互不兼容，且触发路径完全不同。
立即学习“前端免费学习笔记（深入）”；
最易被忽略的一点：paint-order 的生效前提是描边和填充颜色有足够对比度。如果 fill 和 stroke 颜色太接近，或者 stroke-width 过小（比如 1px），即使顺序正确，肉眼也看不出差别。建议调试时先用高对比色（如黑字白描边）+ 至少 3px 描边宽度，确认逻辑跑通后再调回设计稿值。
