做項目碰到需要文字漸變並且有陰影的，首先用常規方法寫下來的思路是這樣的：
<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內核的瀏覽器能很好的兼容，所以使用還要謹慎