具有透明文本颜色的文本阴影 [重复]答案

【问题标题】：Text-Shadow with transparent text color [duplicate]具有透明文本颜色的文本阴影 [重复]
【发布时间】：2021-05-26 02:17:33
【问题描述】：

我正在尝试使用 CSS 中的 text-shadow 属性来实现以下设计，但继续获得纯色结果。我已经尝试为 font-color 和 text-shadow 包含一个 rgba 值255,0,0,0.0：

  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

结果是：

我希望实现：

【问题讨论】：

标签： css

【解决方案1】：

我建议改为尝试使用text-stroke 属性以获得相同的效果并减少麻烦。下面的例子，干杯。

body {
  background: url(https://picsum.photos/seed/picsum/800/800) no-repeat center;
  background-size: cover;
}

h1 {
  text-align: center;
  font-size: 7rem;
  font-weight: 600;
  font-family: 'Segoe UI';
  margin: 0;
  color: transparent;
  text-stroke: 2px #000;
  -webkit-text-stroke: 2px #000;
}

&lt;h1&gt;NIFTY TEXT&lt;/h1&gt;

【讨论】：

我以前看过这个并且很想使用它，但是缺少 IE 支持。你会建议什么作为后备？
IE需要支持多久？它会在明年六月到达end of life，但让我修改一下，除了使用 SVG 而不是文本之外，我就是这样做的。

【解决方案2】：

如果您不能使用 text-stroke，您可以使用伪元素和 text-shadow 来伪造它。

h1 {
  font-size: 50pt;
  background: rgb(89,89,255);
  background: linear-gradient(90deg, rgba(89,89,255,1) 35%, rgba(0,212,255,1) 100%);
  -webkit-background-clip: text;
  color: transparent;
  z-index:1;
}
h1::before {
  content:"Hello World";
  position: absolute;
  top:45px;
  left:7.5px;
  font-size: 50pt;
  background:none;
  text-shadow: 1px 0 0 black, 0 1px 0 black, 0 -1px 0 black, -1px 0 0 black;
  -webkit-background-clip: none;
  -webkit-text-fill-color:  transparent;
  z-index:-1;
}
body {
background: rgb(89,89,255);
background: linear-gradient(90deg, rgba(89,89,255,1) 35%, rgba(0,212,255,1) 100%);
}

<h1>Hello World</h1>

【讨论】：