做项目碰到需要文字渐变并且有阴影的，首先用常规方法写下来的思路是这样的：
<p>这是渐变文字的内容</p>
p{
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow:5px 5px 5px #000;
}
但是发现一个问题，阴影会浮在字体颜色的上面，根本没办法看，然后去找别的文字渐变的方法，在简书上看到还有一种方法，如下：
p{
position: relative;
text-shadow: -5px 5px 5px #d7e1ec;
color:#257ae3;
}
p::after{
position: absolute;
content: "这是渐变文字的内容";
left: 0;
color:#50bdf5;
-webkit-mask-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.9)), color-stop(40%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
text-shadow:0px 0px 2px rgba(80, 189, 245, 1);
}
文字的渐变兼容性很差目前仅webkit内核的浏览器能很好的兼容，所以使用还要谨慎