嵌套text-shadow时，如何继承阴影的颜色？

Question

我的文字应用了这种阴影效果。

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>

Answer 1

试试这个

CSS

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

使用CSSinherit属性值继承父色属性

Answer 2

对于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>

如果您想要多个阴影，它们需要在父元素或子元素上属于相同的属性，因为它是继承的属性。只需注意顺序（应用阴影效果front-to-back：第一个阴影在上面）

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>

When I nest text-shadow, how to inherit the color of the shadow?