Javascript css将阴影切换到文本的后面

我试图通过添加阴影使一些文本看起来更为3D，但我无法使阴影出现在文本后面，我尝试过切换它，但它总是以奇怪的方式断开，阴影要么在顶部，要么完全混乱，下面是我的确切代码：
正如您所看到的，问题是阴影位于文本前面，而不是文本后面

如果你有一个比我目前的方法更好的建议，我很感兴趣，只要最终结果看起来一样（显然阴影的位置除外），
我只有一个要求：解决方案的代码必须只使用HTML、CSS和/或JavaScript（最好是HTML5和CSS3）

h1.CV:before{
/*文本对齐：居中*/
背景：无；
内容：attr（数据文本）；
/*左：0*/
位置：绝对位置；
文本阴影：5px 5px 2px rgba（0,0,0,0.75）；/*X，Y，模糊半径，颜色*/
排名：0；
z指数：-1；
}
h1.CV{
/* http://jsfiddle.net/2GgqR/258/ */
文本对齐：居中；
字号：10em；
背景图像：-webkit线性渐变（红色、橙色、黄色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
位置：相对位置；
z指数：0；
}

---

CV

您正在通过

-webkit text fill color

将文本颜色设置为透明，以便背景图像可以用作填充。“堆叠顺序”意味着文本本身高于背景中的任何内容。文本阴影是文本的属性，因此它也将位于背景之上。我认为这种方法行不通

---

您可能还需要至少一个HTML元素才能完成此工作-这是一个可接受的解决方案吗？

您正在通过

-webkit text fill color

将文本颜色设置为透明，以便背景图像可以用作填充。“堆叠顺序”意味着文本本身高于背景中的任何内容。文本阴影是文本的属性，因此它也将位于背景之上。我认为这种方法行不通

---

您可能还需要至少一个HTML元素才能完成此任务—这是一个可接受的解决方案吗？

这是因为您正在设置

h1

的

z-index

。只需将其保留为

z-index:auto

，负片

z-index

应能正常工作。请注意，根据您正在使用的属性，此效果会有所不同

h1.CV:before{
/*文本对齐：居中*/
背景：无；
内容：attr（数据文本）；
/*左：0*/
位置：绝对位置；
文本阴影：5px 5px 2px rgba（0,0,0,0.75）；/*X，Y，模糊半径，颜色*/
排名：0；
z指数：-1；
}
h1.CV{
/* http://jsfiddle.net/2GgqR/258/ */
文本对齐：居中；
字号：10em；
背景图像：-webkit线性渐变（红色、橙色、黄色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
位置：相对位置；
z指数：自动；
}

---

CV

这是因为您正在设置

h1

的

z-index

。只需将其保留为

z-index:auto

，负片

z-index

应能正常工作。请注意，根据您正在使用的属性，此效果会有所不同

h1.CV:before{
/*文本对齐：居中*/
背景：无；
内容：attr（数据文本）；
/*左：0*/
位置：绝对位置；
文本阴影：5px 5px 2px rgba（0,0,0,0.75）；/*X，Y，模糊半径，颜色*/
排名：0；
z指数：-1；
}
h1.CV{
/* http://jsfiddle.net/2GgqR/258/ */
文本对齐：居中；
字号：10em；
背景图像：-webkit线性渐变（红色、橙色、黄色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
位置：相对位置；
z指数：自动；
}

---

CV

好吧，我希望这就是你想要的。我试着用两个重叠的

标签来做这件事。这是你的电话号码。代码如下：

h1.CV:before{
/*文本对齐：居中*/
背景：无；
内容：attr（数据文本）；
/*左：0*/
位置：绝对位置；
排名：0；
z指数：-1；
}
h1.CV{
/* http://jsfiddle.net/2GgqR/258/ */
文本对齐：居中；
字号：10em；
背景图像：-webkit线性渐变（红色、橙色、黄色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
位置：绝对位置；
z指数：0；
顶部：20px；
}
h1.CV2：之前{
/*文本对齐：居中*/
背景：无；
内容：attr（数据文本）；
/*左：0*/
位置：绝对位置；
文本阴影：5px 5px 2px rgba（0,0,0,0.75）；/*X，Y，模糊半径，颜色*/
排名：0；
z指数：-1；
}
h1.CV2{
/* http://jsfiddle.net/2GgqR/258/ */
文本对齐：居中；
字号：10em；
背景图像：-webkit线性渐变（红色、橙色、黄色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
位置：绝对位置；
z指数：0；
顶部：20px；
}

CV
CV

好吧，我希望这就是你想要的。我试着用两个重叠的

标签来做这件事。这是你的电话号码。代码如下：

h1.CV:before{
/*文本对齐：居中*/
背景：无；
内容：attr（数据文本）；
/*左：0*/
位置：绝对位置；
排名：0；
z指数：-1；
}
h1.CV{
/* http://jsfiddle.net/2GgqR/258/ */
文本对齐：居中；
字号：10em；
背景图像：-webkit线性渐变（红色、橙色、黄色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
位置：绝对位置；
z指数：0；
顶部：20px；
}
h1.CV2：之前{
/*文本对齐：居中*/
背景：无；
内容：attr（数据文本）；
/*左：0*/
位置：绝对位置；
文本阴影：5px 5px 2px rgba（0,0,0,0.75）；/*X，Y，模糊半径，颜色*/
排名：0；
z指数：-1；
}
h1.CV2{
/* http://jsfiddle.net/2GgqR/258/ */
文本对齐：居中；
字号：10em；
背景图像：-webkit线性渐变（红色、橙色、黄色）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
位置：绝对位置；
z指数：0；
顶部：20px；
}

<