我无法制作文本的内部阴影（结果不正确）

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>

Answer 2

    .text {
  font-size: 50px;
  display:flex;
  justify-content: center;
  font-stretch: ultra-expanded;
  color: rgb(96, 32, 24);
background-color: rgb(186, 186, 186);
background-image: url(http://previews.123rf.com/images/auborddulac/auborddulac1201/auborddulac120100059/12000991-Dotted-yellow-background-Stock-Photo.jpg);
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}

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