text-shadow 显示在同一元素的上一行文本的顶部答案

【问题标题】：text-shadow shows on top of text of previous line, of same elementtext-shadow 显示在同一元素的上一行文本的顶部
【发布时间】：2019-01-31 12:00:05
【问题描述】：

为什么文本阴影会呈现在投射阴影的文本上方。我希望所有阴影都显示在所有文本下方。

阴影位于上一行的顶部：红色的 HATE 是阴影，应该显示在 LOVE 的文字下方

阴影在下面一行：

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

&lt;h1&gt;LOVE LOVE LOVEL LOVE &lt;br&gt;HATE HATE HATE HATE HATE&lt;/h1&gt;

【问题讨论】：

【解决方案1】：

只是因为文本本身会在重叠的情况下高于上一行，因此阴影将遵循以下逻辑：

h1 {
  line-height:0.8;
}
span {
  background:red;
}

<h1>

  <span>LOVE LOVE LOVEL LOVE <br>HATE HATE HATE HATE HATE</span>
</h1>

正如您所见，下一行的装饰在使用背景时隐藏上一行，考虑到阴影和其他属性（如边框）也是如此。每一行的装饰都会在前一行的上方

h1 {
  line-height:0.8;
  text-shadow:0px -20px #fff;
}
span {
  background:red;
  border:2px solid green;
}

<h1>

  <span>LOVE LOVE LOVEL LOVE <br>HATE HATE HATE HATE HATE</span>
</h1>

从步骤（7）中绘制顺序的the specification有点复杂你会看到我们以树顺序（每一行）处理每个行框

否则，对于该元素的每个行框：

对于作为该元素的子元素的每个框，在该行框中，按树顺序：

【讨论】：

我明白为什么会这样，但它非常违反直觉。您希望阴影同时应用于整个元素，而不是逐行。我想知道这是规范中定义的方式，还是只是实施的结果。
@JamesCoyle 它在规范中定义，检查更新
我知道渲染顺序是在规范中定义的，但是有什么描述阴影应该如何与之交互的吗？以这种方式渲染对我来说似乎是一种疏忽。与 OP 预期结果相反，我看不出任何需要 OP 问题的情况。
@JamesCoyle 您可以深入研究规范以找到这些细节，但我知道我们会考虑每个行框，我们绘制其装饰和文本，然后我们移至下一个.. 看起来很直观对我来说有这样的输出，我希望文本重叠，因此阴影也会这样做

【解决方案2】：

如果你看一下你写的 css，第二个选项（这里是 25px）选择阴影的位置比较元素。下面的代码，

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

将在 H1 下方创建一个阴影，这是默认设置。如果您希望文本上方有阴影，则需要这样写：

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

区别是减号。

【讨论】：