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

是的，亲爱的，你可以给你的影子赋予负值。例如 = 文本阴影：-3px -5px 黑色；

Answer 2

您可以使用如下代码：

p {
color: black;
background: -webkit-linear-gradient(#1de268, #4662FF);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color:#FF8802;
-webkit-text-fill-color:transparent;
-webkit-background-clip: text;
text-shadow: 0px -8px 2px rgba(0,0,0,0.25);
}

Answer 3

你改变影子属性。不要使用 text-shadow，请尝试：

filter: drop-shadow(15px 15px black);

Answer 4

试试这个：

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

Answer 5

您好，请看一下代码片段，可能对您有所帮助

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

<p>Some Text</p>

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

CSS Text with Linear Gradient, Shadow and Text Outline?

html

css

linear-gradients