Skip to content

纯文本渐变效果

话不多说,都在代码里

css
    // font-style: oblique; // 下划线
    letter-spacing: 3px;
    text-shadow: 3px 3px 6px gray;

    // ↓简写,其实是给background-image 设置为渐变色,不是 background-color
    background: linear-gradient(to right, red, blue); 

    //  ↓只留下文本的背景区域(存在严重的兼容问题)
    -webkit-background-clip: text;

    // ↓让文字为透明色,就是让后面背景色显示出来。
    color: transparent;

效果如下

image