CSS 实现文字颜色渐变的 3 种方法

小编春风 2019年9月3日13:06:35 2 56

CSS 实现文字颜色渐变的 3 种方法

最近小编的老大弥雅在开发自使用的 wordpress 主题的时候,打算部分元素中文字采用 CSS 实现颜色渐变。在查阅一些资料和求助一些前端大佬后总结出比较实用的三个方法,现在小编就分享给大家。

方法一

CSS 实现文字颜色渐变的 3 种方法

background-image: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
-webkit-text-fill-color: transparent 使用透明颜色填充文本。
-webkit-background-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;
 background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow); 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
 }
 </style>
</head>
<body>
 <div>
 Hello World ~
 </div>
</body>
</html>

方法二

CSS 实现文字颜色渐变的 3 种方法

使用: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>

方法三

CSS 实现文字颜色渐变的 3 种方法

采用 svg 方式

<!DOCTYPE html>
<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>
weinxin
我的微信
这是我的微信扫一扫
小编春风

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • boke112联盟 boke112联盟 5

      这些技巧很实用,学习了

      • 明月登楼 明月登楼 4

        会玩儿!