如何组合 CSS“text-shadow”和“background-image:-webkit-gradient”

Question

我正在尝试使用 CSS 文本阴影以及文本阴影和背景图像的组合在 Chrome/Safari 中实现渐变 + 文本阴影效果：-webkit-gradient，请参见示例 blw。我只能应用其中一种效果（如果我添加阴影，渐变就会消失。我做错了什么？

 h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}

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

Answer 1

渐变“消失”是因为 text-shadow 位于背景之上。

1. 文本（透明）
2. 影子
3. 的背景。

我们可以通过复制文本并将其放在原始图层下面来解决这个问题，然后在那里应用阴影， 例如：

   h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
  }

  h1 div {
    background-image: linear-gradient(white, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute;
    width: 100%;
}
  h1:after {
    text-shadow: 10px 10px 11px #fff;
    color: transparent;
  }

  #hello:after {
        content: 'Hello World';
  }

   <h1 id="hello"><div>Hello World</div></h1>

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

Answer 2

无需额外的 HTML 标记或伪元素，您可以使用过滤器属性和投影功能实现此效果。此方法也适用于背景图像与渐变。

 h1 {
  font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
  background-image: linear-gradient(#787878, #484848);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-filter: drop-shadow(2px 2px #333);
          filter: drop-shadow(2px 2px #333);
}

小提琴： https ://jsfiddle.net/eywda89g/

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