SVG中的paint-order属性实现文字描边

过去只支持 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; /*先描边*/
}

这样就好多了

现在支持普通文本了

在普通HTML中，可以用-webkit-text-stroke来实现文字的描边效果，例如

<h1 class="txt">前端侦探</h1>
<style>.txt{-webkit-text-stroke: 4px #9747FF;
}
</style>

以往通常使用绝对定位叠加的方式，手动让描边的那一层位于底部（可以用伪元素代替），就像这样

<p class="text" data-title="前端侦探">前端侦探</p>
<style>.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;}
</style>

不过现在，也可以像SVG一样，直接通过paint-order来改变层级了

<h1 class="txt">前端侦探</h1>
<style>.txt{-webkit-text-stroke: 4px #9747FF;paint-order: stroke; /*先描边*/
}
</style>

相比SVG最大的好处就是，排版更加灵活，比如文本自动换行，SVG就无法直接实现，CSS就非常容易了