Html 文本阴影显示在上一行文本的顶部，属于同一元素

为什么文字阴影渲染在投射阴影的文字上方。 我希望所有的阴影都显示在所有的文字下面

阴影位于前一行的顶部： 红色的恨是一个影子，下面应该显示爱的文字

阴影在下面一行：

h1{
文本阴影：-10px-25px 0#f00；
}

---

LOVE-LOVEL-LOVE
HATE-HATE

如果您查看您编写的css，第二个选项（这里是25px）选择阴影与元素的位置。 下面的代码

h1 { text-shadow: 10px 25px 0 #f00;}

将在H1下方创建阴影，这是默认值。 如果您希望文本上方有阴影，则需要写下以下内容：

h1 { text-shadow: 10px -25px 0 #f00;}

---

差值为负数。

原因很简单，因为在重叠的情况下，文本本身将位于前一行之上，因此阴影将遵循以下逻辑：

h1{
线高：0.8；
}
跨度{
背景：红色；
}

爱爱爱爱恨恨

你能解释一下你想要的是什么样子吗？你提供的小提琴使用的是负阴影，上面的代码使用的是正阴影？怎么了？我希望阴影总是在文字下面。到目前为止，我还没有找到一个解决办法，使阴影不溢出前一行。我的问题是，“恨”的红色阴影显示在“爱”的顶部。但既然恨是一个阴影，它应该在“爱”下面，我明白为什么会这样，但这是非常违反直觉的。您希望阴影同时应用于整个元素，而不是逐行应用。我想知道这是否是规范中定义的，还是仅仅是实现的结果。@JamesCoyle它是规范中定义的，请检查更新以确保渲染顺序是规范中定义的，但是否有任何内容描述阴影应该如何与之交互？在我看来，它以这种方式呈现似乎是一种疏忽。我看不出OPS问题会是什么样的情况，而不是OPS预期的结果。@ JAMESCOYLE，您可以挖掘更多的规范来找到这些细节，但我知道我们考虑每一个线框，我们画它的装饰和文本，然后我们移动到下一个。对我来说，有这样的输出似乎很直观，我希望文本重叠，因此阴影也会这样做