很多 CSS
特性更新是非常隐晦的,导致很容易被忽视。最近,Chrome 123
就新增了paint-order
对普通文本的支持,这就让文字描边实现更加容易了。
![1ced3901f43392f83b6c98a2619895fe.png](https://img-blog.csdnimg.cn/img_convert/1ced3901f43392f83b6c98a2619895fe.png)
这并不是一个新属性,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>
效果如下
![d319a3c59b38ef9f5e0ab82400f1b72a.png](https://img-blog.csdnimg.cn/img_convert/d319a3c59b38ef9f5e0ab82400f1b72a.png)
默认情况下,描边是在填充上面的。如果要改变绘制顺序,也相当于改变层级,让填充覆盖在描边上面,可以使用paint-order
属性
rect{
fill: #FFE8A3;
stroke: #9747FF;
stroke-width: 4;
paint-order: stroke; /*先描边*/
}
这个表示先绘制stroke
,效果如下
![2bd34a3bbfd897e895ba1844107207e2.png](https://img-blog.csdnimg.cn/img_convert/2bd34a3bbfd897e895ba1844107207e2.png)
看着变细了,这是因为描边是「居中」的,由于先绘制的描边,后绘制的填充颜色(后绘制的在上面),所以描边被填充盖住了一半,示意如下
![2b4d81b807fde490a64f2215c46aa906.png](https://img-blog.csdnimg.cn/img_convert/2b4d81b807fde490a64f2215c46aa906.png)
这个属性在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>
效果如下
![921144918b3f8ab0aa0eeea959f0217c.png](https://img-blog.csdnimg.cn/img_convert/921144918b3f8ab0aa0eeea959f0217c.png)
文字本身都快被描边给覆盖了,下面调整一下
text{
font-size: 60px;
fill: #FFE8A3;
stroke: #9747FF;
stroke-width: 4;
font-weight: bold;
paint-order: stroke; /*先描边*/
}
这样就好多了
![1f1d880a7e078b35c4134708eeb79139.png](https://img-blog.csdnimg.cn/img_convert/1f1d880a7e078b35c4134708eeb79139.png)
你也可以访问以下链接查看真实效果:
SVG paint-order (codepen.io)[1]
二、现在支持普通文本了
这么好的特性,现在终于支持普通文本了,也就是非 SVG
元素。
在普通HTML
中,我们可以用-webkit-text-stroke
来实现文字的描边效果,例如
<h1 class="txt">前端侦探</h1>
然后加上描边
.txt{
-webkit-text-stroke: 4px #9747FF;
}
效果如下,文字已经被描边压缩的看不清了
![e1504e0efaa9b2bf62e546149165d618.png](https://img-blog.csdnimg.cn/img_convert/e1504e0efaa9b2bf62e546149165d618.png)
在以往,我们通常使用绝对定位叠加的方式,手动让描边的那一层位于底部(可以用伪元素代替),就像这样
<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;
}
示意效果如下
![14ba67b4cc557f64728065d51de78c15.gif](https://img-blog.csdnimg.cn/img_convert/14ba67b4cc557f64728065d51de78c15.gif)
有关这个具体实现可以参考之前这篇文章:CSS和SVG实现文字渐变、描边、投影
不过现在,你也可以像SVG
一样,直接通过paint-order
来改变层级了
.txt{
-webkit-text-stroke: 4px #9747FF;
paint-order: stroke; /*先描边*/
}
效果如下
![8454c1299781c8a88f6c5c49d0090a40.png](https://img-blog.csdnimg.cn/img_convert/8454c1299781c8a88f6c5c49d0090a40.png)
相比SVG
最大的好处就是,排版更加灵活,比如文本自动换行,SVG
就无法实现,CSS
就非常容易了
![6581805bdb584606370388ca97aa872d.png](https://img-blog.csdnimg.cn/img_convert/6581805bdb584606370388ca97aa872d.png)
你也可以访问以下链接查看真实效果:
CSS paint-order (codepen.io)[2]
四、兼容性和总结
提一下兼容性,虽然Chrome 123
才开始支持(2024-03-19),但是Safari
却早早支持了(2017-09-19),这是少数Safari
先于Chrome
支持的属性,实在难得,完整兼容性如下
![22dbd5ade818814e9aefca3948622bef.png](https://img-blog.csdnimg.cn/img_convert/22dbd5ade818814e9aefca3948622bef.png)
下面总结一下文章要点
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
- END -
如果您关注前端+AI 相关领域可以扫码进群交流
扫码进群2或添加小编微信进群1😊
关于奇舞团
奇舞团是 360 集团最大的大前端团队,非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。