Когда я вкладываю текст-тень, как наследовать цвет тени? - PullRequest
Новая
       11

Когда я вкладываю текст-тень, как наследовать цвет тени?

2 голосов
/ 30 июня 2019

У меня есть текст с такими теневыми эффектами. 

span.inner_text {
  text-shadow: 5px 5px 5px red;
}
<span class="inner_text">It's a simple text</span>

Q1. Мы использовали text-shadow для родительского элемента, так как нам нужно было добавить тени к этому. Тогда родительский элемент text-shadow не работал. Почему это? И как я могу вкладывать тени? 

p {
  text-shadow: 15px 15px 15px blue; /* blue shadow disappeared */
}

span.inner_text {
  text-shadow: 12px 12px 5px red;
}
<p>
  <span class="inner_text">It's a simple text</span>
</p>

Q2.

Далее я использовал drop-shadow для родительского элемента. Затем тень элемента p исчезла. Почему это? И как я могу вкладывать тени? 

div {
  filter: drop-shadow(30px 10px blue);
}

p.inner_text {
  text-shadow: 5px 5px 5px red; /* red shadow disappeared */
}
<div>
  <span class="inner_text">It's a simple text</span>
</div>

Ответы [ 2 ]

1 голос
/ 30 июня 2019

Для Q1 , добавьте текст внутри p, и вы лучше поймете 

p {
  text-shadow: 15px 15px 15px blue; /* blue shadow disappeared */
}

span.inner_text {
  text-shadow: 12px 12px 5px red;
}
<p>
  <span class="inner_text">It's a simple text</span> some text here
</p>

Синяя тень относится к тексту внутри p, но для текста внутри span мы рассматриваем тень от span.

Она ведет себя точнокак color.Используется только один text-shadow. 

p {
  color:blue;
}

span.inner_text {
  color:red;
}
<p>
  <span class="inner_text">It's a simple text</span> some text here
</p>

Если вам нужно несколько теней, они должны принадлежать одному и тому же свойству либо в родительском, либо в дочернем элементе, поскольку это наследуемое свойство.Просто обратите внимание на порядок (эффекты тени применяются спереди назад: первая тень сверху) 

p {
  text-shadow: 
    15px 15px 15px blue,
    12px 12px 5px red; 
}

span.inner_text {
 
}
<p>
  <span class="inner_text">It's a simple text</span>
</p>

Для Q2 у вас просто опечатка, так как у вас нет элемента p и вы нацеливаетесь на p элемент: 

div {
  filter: drop-shadow(30px 10px blue);
}

p.inner_text {
  text-shadow: 5px 5px 5px red; 
}
<div>
  <p class="inner_text">It's a simple text</p>
</div>
0 голосов
/ 30 июня 2019

Попробуйте это

CSS 

span.inner_text {
  text-shadow: 12px 12px 5px inherit;
}

Используйте значение свойства CSS inherit для наследования свойства родительского цвета.

...