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

Question

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

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

阴影在下面一行:

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

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

Answer 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>

---

来自 the specification第 (7) 步中的绘制顺序 有点复杂 你会看到我们以树顺序(每行)处理每个线框

2. Otherwise, for each line box of that element:
3. For each box that is a child of that element, in that line box, in tree order: