|
近期博主的老大弥雅在研发自运用的 wordpress 主题的时候，打算部分元素中文字采用 CSS 实现颜色渐变。在查阅有些资料和求助有些前端大佬后总结出比较实用的三个办法，此刻博主就分享给大众。
办法一
bac公斤round-image: -webkit-linear-gradient(...) 为文本元素供给渐变背景。
-webkit-text-fill-color: transparent 运用透明颜色填充文本。
-webkit-bac公斤round-clip: text 用文本剪辑背景，用渐变背景做为颜色填充文本。
缺点：webkit 内核浏览器特有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
.box {
position: relative;
text-align: left;
text-indent:30px;
line-height: 50px;
font-size: 40px;
font-weight: bolder;
bac公斤round-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
-webkit-bac公斤round-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div>
Hello World ~
</div>
</body>
</html>
办法二
运用：mask-image 缺点：webkit 内核浏览器特有
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
.box { position: relative; text-align: left;
text-indent:30px;
line-height: 50px; font-size: 40px;
font-weight: bolder;
color: red;
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0))); }
</style>
</head>
<body>
<div> Hello World ~ </div>
</body>
</html>
办法三
采用 svg 方式
<html>
<head>
<meta charset="UTF-8">
<title>渐变色</title>
<style>
.box-text { fill: url(#SVGID_1_);
font-size: 40px;
font-weight: bolder; }
</style>
</head>
<body>
<svg viewBoxs="0 0 500 300">
<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" x="110px" y="30%">盖世神功</text>
</svg>
</body>
</html>
| 
发表于 2024-6-30 08:15:05
