使用-webkit-background-clip:text时如何消除文本内部的text-shadow

问题根源在于：当给应用了-webkit-background-clip: text的文本加text-shadow时，文本本身是半透明的，阴影会透过透明区域显示在文本内部，导致效果不符合预期。下面提供两种可行的解决方法：

方法一：利用伪元素生成阴影底层 #

通过伪元素复制一份文本，只给伪元素加阴影，原元素保留背景裁剪效果，让原文本覆盖在伪元素上方，这样阴影只会显示在文本外部。

.mask {
  position: relative;
  background-image: radial-gradient(purple, gold);
  background-size: cover;
  mix-blend-mode: luminosity;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  color: rgba(254, 185, 90, .3);
  font-size: 4em;
  font-family: impact;
  font-weight: bold;
}

.withShadow::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-background-clip: unset;
  color: transparent;
  text-shadow: 1px 1px 1px black;
}

<span class="mask">My Text</span>
<span class="mask withShadow" data-text="My Text">My Text</span>

方法二：双层文本结构 #

直接用两个相同的文本元素，底层元素只设置阴影，上层元素做背景裁剪，通过定位让两层重合，实现外部阴影效果。

.text-container {
  position: relative;
}

.mask {
  position: relative;
  z-index: 1;
  background-image: radial-gradient(purple, gold);
  background-size: cover;
  mix-blend-mode: luminosity;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  color: rgba(254, 185, 90, .3);
  font-size: 4em;
  font-family: impact;
  font-weight: bold;
}

.text-shadow {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  color: transparent;
  text-shadow: 1px 1px 1px black;
  font-size: 4em;
  font-family: impact;
  font-weight: bold;
}

<span class="mask">My Text</span>
<div class="text-container">
  <span class="text-shadow">My Text</span>
  <span class="mask">My Text</span>
</div>

这两种方法都能让阴影只显示在文本外部，不会穿透到文本内部，你可以根据实际场景选择合适的方案。

内容的提问来源于stack exchange，提问作者Eric Sayag