首页 > 建站教程 > CSS3+HTML5 >  css3设置字体颜色渐变的三种方法正文

css3设置字体颜色渐变的三种方法

css3设置字体颜色渐变的三种方法,在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了:


基础样式:

1.gradient-text{text-alignleft;text-indent:30px;line-height50px;font-size:40px;font-weight:bolderpositionrelative;}


第一种方法,使用 background-cli、 text-fill-color:

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

说明:

background: linear-gradient(…) 为文本元素提供渐变背景。

webkit-text-fill-color: transparent 使用透明颜色填充文本。

webkit-background-clip: text 用文本剪辑背景,用渐变背景作为颜色填充文本。


第二种方法,使用mask-image:

01.gradient-text-two{
02  color:red;
03}
04.gradient-text-two[data-content]::after{
05  contentattr(data-content);
06  displayblock;
07  positionabsolute;
08  color: yellow;
09  left0;
10  top0;
11  z-index2;
12  -webkit-mask-image: -webkit-gradient(linear, 0 00 bottom, from(yellow), to(rgba(002550)));
13}


说明:

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


第三种方法,使用 linearGradient、fill:

01.gradient-text-three{
02  fill:url(#SVGID_1_);
03  font-size:40px;
04  font-weight:bolder;
05}
06<svg viewBoxs="0 0 500 300" class="svgBox">
07  <defs>
08    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
09      <stop offset="0" style="stop-color:yellow"/>
10      <stop offset="0.5" style="stop-color:#fd8403"/>
11      <stop offset="1" style="stop-color:red"/>
12    </linearGradient>
13  </defs>
14  <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
15</svg>


说明:

在SVG中,有两种主要的渐变类型:

线性渐变(linearGradient)

放射性渐变(radialGradient)


SVG中的渐变不仅可以用于填充图形元素,还可以填充文本元素

dom示例:

01<!DOCTYPE html>
02<html>
03<head>
04    <meta charset="utf-8">
05    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
06    <title>CSS3渐变字体</title>
07    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
08    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
10    <style type="text/css">
11        *{margin:0;padding:0;}
12        body,html{width:100%;height:100%;}
13        .wrapper{width:80%;margin:0 auto;margin-top:30px;}
14        .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
15        .gradient-text-one{  
16            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
17            -webkit-background-clip:text; 
18            -webkit-text-fill-color:transparent; 
19        }
20        .gradient-text-two{
21            color:red;
22        }
23        .gradient-text-two[data-content]::after{
24            content:attr(data-content);
25            display: block;
26            position:absolute;
27            color:yellow;
28            left:0;
29            top:0;
30            z-index:2;
31            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
32        }
33        .gradient-text-three{
34            fill:url(#SVGID_1_);
35            font-size:40px;
36            font-weight:bolder;
37        }
38    </style>
39</head>
40<body>
41    <section class="wrapper">
42        <p class="panel panel-info">
43            <p class="panel-heading">
44                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
45            </p>
46            <p class="panel-body">
47                <h3 class="gradient-text gradient-text-one">花样年华</h3>
48            </p>
49        </p>
50        <p class="panel panel-warning">
51            <p class="panel-heading">
52                <h3 class="panel-title">方法2. mask-image</h3>
53            </p>
54            <p class="panel-body">
55                <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
56            </p>
57        </p>
58        <p class="panel panel-danger">
59             
60            <p class="panel-heading">
61                <h3 class="panel-title">方法3. svg linearGradient</h3>
62            </p>
63  
64            <p class="panel-body">
65                <svg viewBoxs="0 0 500 300" class="svgBox">
66                    <defs>
67                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
68                            <stop  offset="0" style="stop-color:yellow"/>
69                            <stop  offset="0.5" style="stop-color:#fd8403"/>
70                            <stop  offset="1" style="stop-color:red"/>
71                        </linearGradient>
72                    </defs>
73                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
74                </svg>
75            </p>
76  
77        </p>
78    </section>
79</body>
80</html>


效果:

css3设置字体颜色渐变的三种方法