iconfont 图标如何实现颜色渐变

最近项目中UI 设计了图标渐变效果,在此处记录下:

  html部分代码:

 <view class="icon iconfont iconyuezhifu_icon item-icon"></view>

css:

 .item-icon{
            // color: #e54746;
            font-size: 52rpx;
            background-image: linear-gradient(135deg, 
            #eb6867 0%, 
            #e85857 67%, 
            #e54746 100%);
            -webkit-background-clip: text;
            color:transparent;
  }

 除了设置 -webkit-background-clip :text; 

实现渐变字体,还需要将color 设置为transparent 来配合一起使用

posted @ 2020-03-09 15:55  zty_Love  阅读(3582)  评论(0编辑  收藏  举报