方法一：（不可添加文字陰影）
.main {
background: linear-gradient(180deg, red, blue);
-webkit-background-clip: text;
color: transparent;
font-size: 30px;
}
<h2 class="main">我是利用background-clip變色的文字</h2>
效果圖：
image.png
方法二：（可添加文字陰影）
h1 {
position: relative;
font-size: 30px;
color: palevioletred;
text-shadow: -2px 2px 2px rgba(0, 0, 0, 1);
}
h1[data-content]:after {
position: absolute;
content: attr(data-content);
text-decoration: none;
top: 0;
left: 0;
z-index: 2;
color: yellow;
/* -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); */
-webkit-mask-image: linear-gradient(180deg, yellow 50%, transparent);
-webkit-mask-size: 100% 100%;
}
<h1 data-content="我是利用mask-image變色的文字">我是利用mask-image變色的文字</h1>
效果圖：
image.png
方法三：（可添加文字陰影）
.gradient-text-three {
fill: url(#SVGID_1_);
font-size: 16px;
font-weight: bolder;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}
<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:#fd8403" />
<stop offset="0.5" style="stop-color:#fd8403" />
<stop offset="1" style="stop-color:green" />
</linearGradient>
</defs>
<text text-anchor="start" class="gradient-text-three" x="110px" y="30%">我是利用svg變色的文字</text>
</svg>
效果圖：
image.png
案列：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
.text {
font: 100px '微軟雅黑';
font-weight: bold;
text-shadow: 1px 2px 3px rgba(67, 8, 7, 0.8);
/* 發(fā)光色 */
color: #c60df0;
position: relative;
}
.text:before {
content: '好奇心';
/* 控制文字中間顏色 */
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.8);
position: absolute;
left: 0px;
color: rgba(0, 0, 0, 0);
}
.text2 {
font: 100px '微軟雅黑';
font-weight: bold;
position: relative;
text-shadow: 1px 2px 3px rgba(67, 8, 7, 0.8);
color: #c60df0;
}
.text2:after {
position: absolute;
left: 0px;
content: '好奇心';
color: #ea0000;
-webkit-mask-image: -webkit-gradient(
linear,
0 0,
0 100%,
from(rgba(0, 0, 0, 0.9)),
color-stop(40%, rgba(0, 0, 0, 0.5)),
to(rgba(0, 0, 0, 0))
);
text-shadow: 0px 0px 2px rgba(234, 0, 0, 1);
}
</style>
</head>
<body>
<div class="text">好奇心</div>
<div class="text2">好奇心</div>
</body>
</html>
效果圖：
image.png
