html - 我无法制作文本的内部阴影(不正确的结果)

Question

我在为文本创建内部阴影时遇到了问题。我尝试了这个方法(有些 css 在这样的在线编译器中不起作用，但代码是可见的):

.text {
  background-color: #565656;
  font-size: 35px;
  color: transparent;
  text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
  -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

<div class="text">
Text
</div>

结果是浅灰色文本，但我需要不同颜色的文本。当我尝试更改文本颜色和阴影颜色(不是 alpha)时，很明显，“背景剪辑:文本；”不切割文本区域的阴影，我看到字母轮廓外有一个模糊的剪影。

这是发生了什么(这里的文本和阴影颜色是错误的，但是重叠是可见的):

这就是我需要的:

Answer 1

通过使用与主阴影颜色相同的背景颜色是可能的，可能还有其他方法，但这是我所知道的最常见的方法。

源代码 -- https://codepen.io/vincicat/pen/zikrC

body {
  /* This has to be same as the text-shadows below */
  background: #def;
}

h1 {
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 2em;
  line-height: 1em;
  text-align:center;
}

.inset-text {
  /* Shadows are visible under slightly transparent text color */
  color: rgba(10, 60, 150, 0.8);
  text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}

/* Don't show shadows when selecting text */
::-moz-selection, ::selection {
  background: #5af;
  color: #fff;
  text-shadow: none;
}

<h1 class="inset-text">Inset text-shadow trick</h1>