我试图在Chrome / Safari中使用CSS文本阴影以及文本阴影和背景图像：-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;
}
解决方法
渐变“消失”,因为文本阴影位于背景上方.
>文字(透明)
阴影
>背景.
我们可以通过复制文本并将其放在原始图层下面,然后在那里应用阴影,for example：
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: -webkit-gradient(linear,to(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>
