css - 嵌套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

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