Web前端之路1024Vue.js

css3文字渐变

2023-04-27  本文已影响0人  圆梦人生

知识点

效果

image.png

代码

<span class="linearGradient">文字渐变色</span>
.linearGradient {
    display: inline-block;
    height: 80px;
    font-size: 50px;
    font-weight: 600;
    // 渐变背景
    background: -webkit-linear-gradient( 120deg, #02a4ff 30%,  #00c5d9);
    // 文字的范围来裁剪背景图片
    -webkit-background-clip: text;
    background-clip: text;
    // 文本填充颜色
    -webkit-text-fill-color: transparent;
  }
上一篇 下一篇

猜你喜欢

热点阅读