如何使用 Webkit 渐变拥有 Text-Shadow答案

【问题标题】：How to have Text-Shadow with Webkit gradient如何使用 Webkit 渐变拥有 Text-Shadow
【发布时间】：2018-06-04 14:43:27
【问题描述】：

当我使用带有 Webkit 渐变的 Text-Shadow 时，它似乎在文本的顶部 - 而不是在后面。我增加了阴影不透明度来显示这一点。

#title {
  font-size: calc(15px + 9vw);
  text-align: center;
  background: linear-gradient(to right, red 0%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 8vh;
  text-shadow: -10px 15px 5px rgba(0,0,0,0.1),
                 -10px 20px 5px rgba(0,0,0,1),
                 -10px 20px 5px rgba(0,0,0,1);
}

&lt;h3 id="title"&gt;Example&lt;/h3&gt;

【问题讨论】：

有趣但合乎逻辑......因为您允许通过文本看到背景
您基本上为元素（框）设置了背景，使其具有文本形状，使文本的颜色/文件颜色透明，并具有文本阴影，如您所愿已经知道文本在元素内部而不是外部，所以背景将在后面，如您所料。

标签： html css shadow

【解决方案1】：

想法是用你放在后面的伪元素创建另一个层。

#title {
  font-size: calc(15px + 9vw);
  text-align: center;
  background: linear-gradient(to right, red 0%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 8vh;
  position:relative;
}
#title:before {
  content:attr(data-text);
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
    text-shadow: -10px 15px 5px rgba(0,0,0,0.1),
                 -10px 20px 5px rgba(0,0,0,1),
                 -10px 20px 5px rgba(0,0,0,1);
  z-index:-1
}

&lt;h3 id="title" data-text="Example"&gt;Example&lt;/h3&gt;

如果您不想复制文本，您可以同时使用伪元素并仅在属性中定义文本：

#title {
  position: relative;
  text-align: center;
  margin-top: 8vh;
  font-size: calc(15px + 9vw);
  z-index: 0;
}

#title:before {
  content: attr(data-text);
  position: relative;
  background: linear-gradient(to right, red 0%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}

#title:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  text-shadow: 
    -10px 15px 5px rgba(0, 0, 0, 0.1), 
    -10px 20px 5px rgba(0, 0, 0, 1), 
    -10px 20px 5px rgba(0, 0, 0, 1);
  z-index: -1;
}

&lt;h3 id="title" data-text="Example"&gt;&lt;/h3&gt;

【讨论】：

我从没想过创建另一个图层并使用 z-index - 谢谢！