渐变字体被text-shadow遮挡问题处理

起因

开发的组件被测试怼了：在把字体颜色配置成渐变，再添加文字阴影时，阴影会将字体遮住。

问题复现

// 渐变字体配置
background-image: linear-gradient(red, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

再加上阴影配置

text-shadow: 0 0 2px black;

好吧，确实遮住了。

仔细一想也确实，字体颜色被设置成transparent了，渐变的颜色其实是background-image的颜色。text-shadow阴影也就理所应当的覆盖在上面了

解决方案

给被遮挡元素设置before或after伪类，把阴影属性给到伪类上

p::before {
        content: attr(text);
        position: absolute;
        color: transparent;
        text-shadow: 0 0 2px black;
        z-index: -1;
}

渐变字体不再被阴影遮挡

追加

评论区提到的filter: drop-shadow方法确实可以，非常好用哈哈