相关疑难解决方法(0)

我正在尝试使用CSS文本阴影以及text-shadow和background-image的组合在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;
}

类似于css 中带有文本阴影的渐变文本，我想使用带有渐变的 Font Awesome 图标。

i.fab {
  font-size: 5rem;
  font-style: normal;
  font-family: fontawesome;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fab fa-stack-overflow"></i>