css中带有文本阴影的渐变文本

Question

无论如何使用这种文本渐变方法并且在文本上也有阴影。 http://css-tricks.com/snippets/css/gradient-text/

当我像这样设置阴影时

text-shadow: 1px 1px 2px #000;

然后它弄乱了我的文本渐变，因为背景设置为透明。有谁知道 webkit 浏览器的解决方案。

原文由 Chapsterj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以结合使用 filter: drop-shadow CSS 属性来解决问题。

 h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px #333);
}

 <h1>Example</h1>

原文由 Francisco Romero 发布，翻译遵循 CC BY-SA 3.0 许可协议