css实现文字渐变

时间 2019-12-08

标签 css 实现文字渐变栏目 CSS 繁體版

原文原文链接

css文件渐变虽然兼容性比较差，可是用在移动端和chrome中仍是没有问题的。css

实现文件渐变的方法有两种html

1. 使用 background 的属性css3

2. 使用 mask 属性web

方式1、chrome

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
    span {
        font-size: 30px;
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
    <span>Hello world</span>
</body>
</html>

效果以下segmentfault

代码也是很是简单：浏览器

background: liner-gradient(to right, red, blue); 这个就是设置背景色，这是是background-image的简写，不是backround-colorwordpress

-webkit-background-clip: text; 这个属性在 W3School 上有明确解释

可是并无text 属性，因此这个只能在chrome上看到效果，在其余浏览器没有实现，它的兼容性就有很大的问题了spa

方式2、ssr

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<style type="text/css">
    h1{
        position: relative;
        color: yellow;
    }
    h1:before{
        content: attr(data-text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }
</style>
</style>
</head>

<body>
    <h1 data-text="hello world">hello world</h1>
</body>

效果以下

参考简单说 CSS中的mask—好好利用mask-image

张鑫旭：小tip:CSS3下的渐变文字效果实现