paint-order 仅对 SVG 中的 <text> 等图形元素有效，HTML 文本节点（如 <p>、<h1>）完全不支持；必须满足：在 <svg> 内、用 <text> 标签、同时声明 fill 和 stroke 才生效。
paint-order 在 HTML 普通文本（如 <p>、<h1>）上完全无效——不是你写错了，是规范根本不允许。
为什么 paint-order 在 <p> 上没反应
浏览器会直接忽略它。DevTools 里能看到声明，但计算样式中查不到，也不影响渲染。这是因为 CSS 规范明确定义：paint-order 只作用于 SVG 渲染树中的图形元素，比如 <circle>、<rect>、<text>，不适用于 HTML 文本节点。
常见误判：看到控制台没报错，就以为生效了；实际得看视觉效果是否出现“描边只露在外侧”或“填充盖住描边内半边”。
-
paint-order: stroke在<div>或<p>上写了也白写 - 即使搭配
-webkit-text-stroke一起用，二者互不识别——一个走 SVG 渲染管线，一个走 HTML 文本私有通道 - 想验证是否生效？打开 DevTools → Elements → 选中元素 → Computed → 搜
paint-order，如果没出现，就是没接入渲染流程
在 SVG 中正确使用 paint-order 的三个硬性条件
必须同时满足以下三点，paint-order 才会起效：
立即学习“前端免费学习笔记（深入）”；
- 容器是
<svg>（不能是<div>包着<svg>就完事，得确保文本在 SVG 命名空间内） - 文字用的是
<text>标签（不是<span>或<div>里面塞文字） - CSS 中同时声明了
fill和stroke（缺一不可；只设stroke而没fill，paint-order不触发）
基础写法示例：
svg text {
font-size: 60px;
fill: #fff;
stroke: #000;
stroke-width: 6;
paint-order: stroke;
}
效果：先画描边，再画填充，填充会覆盖描边内侧一半，视觉上描边“缩进变细、外缘清晰”——这才是真正的外描边逻辑。
paint-order 的取值和实际行为差异
paint-order 不是“开关”，而是绘制阶段的调度指令。它的值决定从哪个阶段开始按默认顺序继续：
-
paint-order: stroke→ 先描边，再填充，最后 markers（等同于stroke fill markers） -
paint-order: fill→ 先填充，再描边，最后 markers（等同于默认normal） -
paint-order: stroke fill和stroke效果一致；CSS 解析器会自动补全剩余项 -
stroke-width始终居中绘制，所以paint-order: stroke的“外描边感”本质是填充盖住了内半边，不是描边真的偏移了
注意：该属性不支持动画，且继承性为 yes，但子元素若未显式设置 fill/stroke，继承来的 paint-order 仍不会生效。
别混搭 -webkit-text-stroke 和 paint-order
有人试图在 SVG <text> 里同时写 stroke 和 -webkit-text-stroke，结果后者被静默忽略——SVG 渲染器根本不认这个 WebKit 私有前缀。
真要兼顾兼容性，分场景用：
- HTML 文本 → 用
text-shadow多方向模拟（兼容性好，但边缘有锯齿，color: transparent必须配合） - 需要高保真外描边 → 用 SVG +
<text>+paint-order: stroke（支持渐变stroke、任意粗细、无失真） - 设计师坚持要“HTML 里直接描边还带动画” → 放弃
paint-order，改用 SVGstroke-dasharray+stroke-dashoffset动画
最容易被忽略的一点：如果 fill 和 stroke 颜色对比度太低，或者 stroke-width 过小（比如 paint-order 是否生效——它不改变颜色，只改变绘制层叠关系。
