css文字渐变和文字阴影

做项目碰到需要文字渐变并且有阴影的，首先用常规方法写下来的思路是这样的：

这是渐变文字的内容

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内核的浏览器能很好的兼容，所以使用还要谨慎

 

转载于:https://www.cnblogs.com/ding0528/p/9117534.html