很多 CSS 特性更新是非常隐晦的，导致很容易被忽视。最近，Chrome 123 就新增了paint-order对普通文本的支持，这就让文字描边实现更加容易了。
这并不是一个新属性，SVG中已经支持很多年了。一起了解一下吧
一、过去只支持 SVG 元素
paint-order，顾名思义，表示绘制的顺序。
对于一个图形的绘制，顺序还是非常重要的。例如用SVG来绘制一个带边框的矩形
<style>
rect{
fill: #FFE8A3;
stroke: #9747FF;
stroke-width: 4;
}
</style>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="200" height="200" />
</svg>
效果如下
默认情况下，描边是在填充上面的。如果要改变绘制顺序，也相当于改变层级，让填充覆盖在描边上面，可以使用paint-order属性
rect{
fill: #FFE8A3;
stroke: #9747FF;
stroke-width: 4;
paint-order: stroke; /*先描边*/
}
这个表示先绘制stroke，效果如下
看着变细了，这是因为描边是「居中」的，由于先绘制的描边，后绘制的填充颜色（后绘制的在上面），所以描边被填充盖住了一半，示意如下
这个属性在SVG文本中应该更明显，例如
<style>
text{
font-size: 60px;
fill: #FFE8A3;
stroke: #9747FF;
stroke-width: 4;
font-weight: bold;
}
</style>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">前端侦探</text>
</svg>
效果如下
文字本身都快被描边给覆盖了，下面调整一下
text{
font-size: 60px;
fill: #FFE8A3;
stroke: #9747FF;
stroke-width: 4;
font-weight: bold;
paint-order: stroke; /*先描边*/
}
这样就好多了
你也可以访问以下链接查看真实效果：
二、现在支持普通文本了
这么好的特性，现在终于支持普通文本了，也就是非 SVG 元素。
在普通HTML中，我们可以用-webkit-text-stroke来实现文字的描边效果，例如
<h1 class="txt">前端侦探</h1>
然后加上描边
.txt{
-webkit-text-stroke: 4px #9747FF;
}
效果如下，文字已经被描边压缩的看不清了
在以往，我们通常使用绝对定位叠加的方式，手动让描边的那一层位于底部（可以用伪元素代替），就像这样
<p class="text" data-title="前端侦探">前端侦探</p>
.text{
margin: 0;
font-weight: bold;
-webkit-text-stroke: 6px rgb(51, 51, 51);
}
.text::before{
content: attr(data-title);
position: absolute;
background-image: linear-gradient(#FFCF02, #FF7352);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0;
}
示意效果如下
有关这个具体实现可以参考之前这篇文章：CSS和SVG实现文字渐变、描边、投影
不过现在，你也可以像SVG一样，直接通过paint-order来改变层级了
.txt{
-webkit-text-stroke: 4px #9747FF;
paint-order: stroke; /*先描边*/
}
效果如下
相比SVG最大的好处就是，排版更加灵活，比如文本自动换行，SVG就无法实现，CSS就非常容易了
你也可以访问以下链接查看真实效果：
四、兼容性和总结
提一下兼容性，虽然Chrome 123才开始支持（2024-03-19），但是Safari却早早支持了（2017-09-19），这是少数Safari先于Chrome支持的属性，实在难得，完整兼容性如下
下面总结一下文章要点
paint-order，顾名思义，表示绘制的顺序。
默认情况下，先绘制填充，后绘制描边，也就是描边是在填充上面
paint-order可以改变描边和绘制的层级，更好的实现文字描边效果
在过去paint-order仅支持SVG元素
现在paint-order也支持普通HTML文本了
相比SVG最大的好处就是，排版更加灵活，比如文本自动换行
由于兼容性限制，目前还无法大规模使用。不过可以预见的是，SVG和CSS一直都在相互发展的，各种属性也都通用了。关注我，学习更多有趣的前端新特性。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、在看、转发 ❤❤❤
[1]SVG paint-order (codepen.io)： https://codepen.io/xboxyan/pen/poXyjQp
[2]CSS paint-order (codepen.io)： https://codepen.io/xboxyan/pen/yLdOoeE