paint-order 仅对 svg 元素和含文字的 html 元素（如 span、p）生效，不作用于盒模型 border 或 padding；它控制 fill/stroke 渲染顺序，而 border 是独立绘制层，无绘制顺序可调。
paint-order 不作用于盒模型的 border 或 padding，它只对 SVG 元素和使用 text 渲染的 HTML 文本生效（如 <span></span>、<p></p> 等含文字内容的元素）。想靠它“调整边框与填充的绘制顺序”，本质是误解了它的适用范围。
为什么 paint-order 对盒模型边框无效？
paint-order 控制的是 SVG 图形绘制阶段中 fill、stroke 和 markers 的渲染次序，而 CSS 盒模型中的 border 是一个独立的绘制层，不属于 SVG 的 fill/stroke 概念。浏览器把 border 当作块级渲染层的一部分，不参与文本级的绘制调度。
-
border是盒模型的视觉边界，由border-width、border-style、border-color三要素共同定义，它没有“绘制顺序”可调 —— 它就是画在 padding 外、margin 内的一条固定层 -
paint-order只在元素有stroke（比如设置了text-stroke）且启用了 SVG 渲染上下文时才起作用 - 给一个
div设置paint-order: stroke fill完全没效果，因为该元素既无stroke，也不走 SVG 渲染管线
真正能控制“描边 vs 填充”顺序的场景只有文本
如果你的目标是让文字描边看起来“包在外面”，而不是被填充盖掉一半，那必须满足两个前提：
- 元素必须是文本节点（如
<h1></h1>、<span></span>），且显式启用描边：text-stroke: 4px #000 - 必须同时设置
fill（等价于color）和paint-order，否则默认行为就是描边压在填充上 -
paint-order: stroke fill才能让描边先画、填充后画，从而“吃掉”描边内侧，形成视觉外扩错觉
示例：
h1 {
color: #fff;
-webkit-text-stroke: 4px #000;
text-stroke: 4px #000;
paint-order: stroke fill;
}
注意：paint-order 在 Firefox 中仍需前缀 -webkit-，且 Safari 对 text-stroke 支持更稳定；Chrome 115+ 已支持无前缀 paint-order，但仅限于有 text-stroke 的文本。
想模拟“外边框”效果？别碰 paint-order，换思路
如果实际需求是让一个块级容器（比如 div）看起来有“外描边”，而不是标准的内嵌边框，有更可靠的方式：
- 用
outline+outline-offset：它天然脱离盒模型，可正可负偏移，但不占布局空间，且不支持圆角 - 用伪元素
::after绝对定位 +transform: scale()模拟外扩边框，可控性强 - 用
box-shadow的inset或多层投影模拟，适合简单粗边框 - 直接套一层父容器，用
margin和border配合实现视觉外边效果
所有这些方案都比强行对非文本元素用 paint-order 更稳定、兼容、可维护。
真正容易被忽略的是：paint-order 的存在感极低，它不是盒模型属性，也不影响任何 layout flow，只在极少数文本特效场景下有用；一旦写在非文本元素或没配 text-stroke 的地方，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
