[英]CSS Text with Linear Gradient, Shadow and Text Outline?
Is it possible to create text which has a linear gradient, a shadow and an outline.是否可以创建具有线性渐变、阴影和轮廓的文本。
My problem is that "-webkit-text-fill-color: transparent" is required for the gradient, so the shadow is on top of the text.我的问题是渐变需要“-webkit-text-fill-color:transparent”,所以阴影在文本的顶部。
Is it possible to get the text on top of the shadow?是否可以将文本置于阴影之上?
Here's my code:这是我的代码:
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>
Try this:尝试这个:
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>
so you overwrite text-shadow所以你覆盖了 text-shadow
You can use the code like below:您可以使用如下代码:
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);
}
Yes dear, you can give negative value to your shadow.是的,亲爱的,你可以给你的影子赋予负面价值。 for example = text-shadow : -3px -5px black;例如 = text-shadow : -3px -5px black;
You change the shadow property.您更改 shadow 属性。 Instead of using text-shadow
, try:不要使用text-shadow
,请尝试:
filter: drop-shadow(15px 15px black);
Hi Please take a look at code snippet may be it help you嗨,请看一下代码片段可能对您有帮助
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.