<!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>CSS
3
渐变字体</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"
>
<h
3
class=
"panel-title"
>方法
1
. background-clip + text-fill-color</h
3
>
</div>
<div class=
"panel-body"
>
<h
3
class=
"gradient-text gradient-text-one"
>花样年华</h
3
>
</div>
</div>
<div class=
"panel panel-warning"
>
<div class=
"panel-heading"
>
<h
3
class=
"panel-title"
>方法
2
. mask-image</h
3
>
</div>
<div class=
"panel-body"
>
<h
3
class=
"gradient-text gradient-text-two"
data-content=
"豆蔻年华"
>豆蔻年华</h
3
>
</div>
</div>
<div class=
"panel panel-danger"
>
<div class=
"panel-heading"
>
<h
3
class=
"panel-title"
>方法
3
. svg linearGradient</h
3
>
</div>
<div class=
"panel-body"
>
<svg viewBoxs=
"0 0 500 300"
class=
"svgBox"
>
<defs>
<linearGradient id=
"SVGID_1_"
gradientUnits=
"userSpaceOnUse"
x
1
=
"0"
y
1
=
"10"
x
2
=
"0"
y
2
=
"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>