CSS怎么实现文字的渐变

北方的文先生

于 2018-10-04 23:40:29 发布

阅读量1.1k

点赞数

文章标签： CSS文字渐变网页文字渐变

本文链接：https://blog.youkuaiyun.com/Lean_on_Me/article/details/82941495

版权

主要用到3个属性

　linear-gradient() 用来实现渐变的图像

background-clip 知道对象的悲剧图像向外裁剪的区域

text-fill-color 指定文字的填充颜色

例如：

<p><a href="#">某市某某生物科技有限公司</a></p>

<style>
  p > a{
            /*to  top指从下到上的渐变*/
      background: linear-gradient(to top,#33CC99 0%,#006666 100%);
      background-clip: text;
      -webkit-background-clip: text;
      text-fill-color: transparent;
      -webkit-text-fill-color: transparent;
    }
</style>

效果如下：