CSS 实现文字阴影 + 文字渐变色

1. CSS 实现文字阴影

通过text-shadow属性可以为文字设置阴影




    
    


    文字阴影


效果如下:


2. CSS实现文字阴影 + 文字渐变色

实现文字渐变色方法参考 CSS 实现文字渐变色

先把两种样式叠加一下看看:





    


  文字渐变色+阴影


效果如下:


阴影浮在渐变文字上

很明显,阴影浮在了文字上方,不是我们想要的效果。这时候,换个思路试试:我们可以在原来的元素上实现文字渐变色效果,然后再创建一个新元素,实现文字的阴影效果,然后将两种效果进行叠加。代码如下:





    


  文字渐变色+阴影


阴影在渐变色文字下

你可能感兴趣的:(CSS 实现文字阴影 + 文字渐变色)