текстовая тень отображается поверх текста предыдущей строки того же элемента

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>

---

С спецификацией порядка рисования на шаге (7) , который каким-то образом сложен вы увидите, что мы имеем дело с каждым строковым блоком в древовидном порядке (каждая строка)

В противном случае для каждого строкового блока этого элемента:

1. Для каждого ящика, являющегося дочерним для этого элемента, в этом строковом блоке , в дерево порядка :

Answer 2

Если вы посмотрите на написанную вами css, вторая опция (здесь 25px) выбирает положение тени по сравнению с элементом.Приведенный ниже код

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

создаст тень под H1, которая используется по умолчанию.Если вы хотите, чтобы над текстом была тень, вам нужно написать следующее:

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

Разница минус.