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

Question

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

当我设置阴影时

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

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

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>