文本阴影显示在同一元素的前一行文本之上

Question

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

阴影在上一行的顶部：红色的 HATE 是影子，应该显示在 LOVE

的文字下方

阴影在以下行下方：

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

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

Answer 1

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

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

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

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

差就是负号。

Answer 2

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

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>

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

Otherwise, for each line box of that element:

For each box that is a child of that element, in that line box, in tree order:

text-shadow shows on top of text of previous line, of same element