html - 具有线性渐变、阴影和文本轮廓的 CSS 文本？

Question

是否可以创建具有线性渐变、阴影和轮廓的文本。

我的问题是渐变需要“-webkit-text-fill-color: transparent”，所以阴影在文本之上。

是否可以让文字位于阴影之上？

这是我的代码:

p {
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  text-shadow: 15px 15px black; 
    }

<p>Some Text</p>

Answer 1

试试这个:

p {
  font-size: 100px;
  background: linear-gradient(to bottom, red, blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  filter: drop-shadow(15px 15px black);
}

<p>Some Text</p>

所以你覆盖文本阴影

Screenshot of the result