如何实现不会通过透明文本显示的阴影？答案

【问题标题】：How would I achieve a shadow that won’t show through transparent text?如何实现不会通过透明文本显示的阴影？
【发布时间】：2019-02-25 16:42:24
【问题描述】：

如果没有图像/路径，我如何实现这种外观？

我需要带有粗边框的文本，以及不会通过透明文本显示的阴影。

我已经尝试过正常的text-shadow，但它没有按我需要的方式工作。

我尝试使用SVG，但它没有提供我需要的灵活性，对于图像也是如此。

【问题讨论】：

在不展示你已经尝试过的东西并解释为什么它不起作用的情况下询问也不是很有帮助。
如果文本是真正透明的，显然这是不可能的。
你可能会觉得这很有用：stackoverflow.com/questions/2570972/css-font-border
jsfiddle.net/ys3cxpf1
抱歉，这个问题听起来像个混蛋，感谢您的帮助。我对这个社区有点陌生，不太确定这一切是如何运作的。

标签： css html text

【解决方案1】：

* {
    box-sizing: border-box;
    font-family: inherit;
}

html {
    font-size: 62.25%;
}

body {
    font-family: sans-serif;
    font-size: 1.6rem;
    background: linear-gradient(to right, rgb(0, 128, 111), rgb(199, 189, 57));
}

h1 {
    background: transparent;
    color: transparent;
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  text-shadow: 3px 3px 0 rgb(54, 54, 54);
  
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(0, 0, 0);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
	
}

&lt;h1&gt;Hello World&lt;/h1&gt;

【讨论】：