Author 王平安
E-mail pingan8787@qq.com
博 客 www.pingan8787.com
微 信 pingan8787
每日文章推荐 https://github.com/pingan8787/Leo_Reading/issues

基础样式

1
2
3
4
5
6
7
8
.gradient-text {
    text-align: left;
    text-indent: 30px;
    line-height: 50px;
    font-size: 40px;
    font-weight: bolder;
    position: relative;
}

1.使用 background-cli和text-fill-color

1
2
3
4
5
.gradient-text-one {
    background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

2.使用 mask-image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.gradient-text-two {
    color: red;
}

.gradient-text-two[data-content]::after {
    content: attr(data-content);
    display: block;
    position: absolute;
    color: yellow;
    left: 0;
    top: 0;
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(
        linear, 0 0, 0 bottom,
        from(yellow), to(rgba(0, 0, 255, 0))
    );
}

mask-image 和 background-image 一样，不仅可以取值是 图片路径，也可以是渐变色。

3.使用 linearGradient和fill

1
2
3
4
5
.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" 
            gradientUnits="userSpaceOnUse"
            x1="0" y1="10" x2="0" y2="50"
        >
            <stop  offset="0" style="stop-color:yellow"/>
            <stop  offset="0.5" style="stop-color:#fd8403"/>
            <stop  offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle" 
        class="gradient-text-three" 
        x="110px" y="30%"
    >花信年华</text>
</svg>

在SVG中，有两种主要的渐变类型：

  • 线性渐变（linearGradient）
  • 放射性渐变（radialGradient）
  • SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>CSS3渐变字体</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }

        .wrapper {
            width: 80%;
            margin: 0 auto;
            margin-top: 30px;
        }

        .gradient-text {
            text-align: left;
            text-indent: 30px;
            line-height: 50px;
            font-size: 40px;
            font-weight: bolder;
            position: relative;
        }

        .gradient-text-one {
            background-image: -webkit-linear-gradient(
                bottom, red, #fd8403, yellow
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .gradient-text-two {
            color: red;
        }

        .gradient-text-two[data-content]::after {
            content: attr(data-content);
            display: block;
            position: absolute;
            color: yellow;
            left: 0;
            top: 0;
            z-index: 2;
            -webkit-mask-image: -webkit-gradient(
                linear, 0 0, 0 bottom, 
                from(yellow), to(rgba(0, 0, 255, 0))
            );
        }

        .gradient-text-three {
            fill: url(#SVGID_1_);
            font-size: 40px;
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <section class="wrapper">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-one">花样年华</h3>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">方法2. mask-image</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-two" 
                data-content="豆蔻年华">豆蔻年华</h3>
            </div>
        </div>
        <div class="panel panel-danger">

            <div class="panel-heading">
                <h3 class="panel-title">方法3. svg linearGradient</h3>
            </div>

            <div class="panel-body">
                <svg viewBoxs="0 0 500 300" class="svgBox">
                    <defs>
                        <linearGradient id="SVGID_1_" 
                            gradientUnits="userSpaceOnUse"
                            x1="0" y1="10" x2="0" y2="50"
                        >
                            <stop offset="0" style="stop-color:yellow" />
                            <stop offset="0.5" style="stop-color:#fd8403" />
                            <stop offset="1" style="stop-color:red" />
                        </linearGradient>
                    </defs>
                    <text text-anchor="middle" 
                        class="gradient-text-three"
                        x="110px" y="30%"
                    >花信年华</text>
                </svg>
            </div>

        </div>
    </section>
</body>

</html>