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

Почему тень текста отображается над текстом, отбрасывающим тень.Я ожидаю, что все тени будут отображаться ниже всего текста.

Тень находится сверху предыдущей строки: красный HATE - это тень, должен отображаться под текстом LOVE

Shadow is above previous line

Тень находится ниже следующей строки: enter image description here

h1 {
  text-shadow: -10px -25px 0 #f00;
}
<h1>LOVE LOVE LOVEL LOVE <br>HATE HATE HATE HATE HATE</h1>

Ответы [ 2 ]

0 голосов
/ 31 января 2019

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

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. Для каждого ящика, являющегося дочерним для этого элемента, в этом строковом блоке , в дерево порядка :
0 голосов
/ 31 января 2019

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

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

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

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

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

...