当前位置：Gxlcms > css > css文字颜色渐变的三种实现方式（附代码）

css文字颜色渐变的三种实现方式（附代码）

时间：2021-07-01 10:21:17 帮助过：25人阅读

本篇文章给大家带来的内容是关于css文字颜色渐变的三种实现方式（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在web前端开发过程中，UI设计师经常会设计一些带渐变文字的设计图，在以前我们只能用png的图片来代替文字，今天可以实现使用纯CSS实现渐变文字了。下面就介绍3中实现方式供大家参考！

基础样式：

  1. .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }

第一种方法，使用 background-cli、 text-fill-color：

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

说明 ：

background: -webkit-linear-gradient(...) 为文本元素提供渐变背景。
webkit-text-fill-color: transparent 使用透明颜色填充文本。
webkit-background-clip: text 用文本剪辑背景，用渐变背景作为颜色填充文本。

第二种方法，使用 mask-image：

  1. .gradient-text-two{
  2.    color:red;
  3. }
  4. .gradient-text-two[data-content]::after{
  5.     content:attr(data-content);
  6.     display: block;
  7.     position:absolute;
  8.     color:yellow;
  9.     left:0;
  10.     top:0;
  11.     z-index:2;
  12.     -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
  13. }

说明：

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

第三种方法，使用 linearGradient、fill：

  1. .gradient-text-three{
  2.     fill:url(#SVGID_1_);
  3.     font-size:40px;
  4.     font-weight:bolder;
  5. }
  1. <svg viewBoxs="0 0 500 300" class="svgBox">
  2.     <defs>
  3.         <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
  4.             <stop  offset="0" style="stop-color:yellow"/>
  5.             <stop  offset="0.5" style="stop-color:#fd8403"/>
  6.             <stop  offset="1" style="stop-color:red"/>
  7.         </linearGradient>
  8.     </defs>
  9.     <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
  10. </svg>

说明：

在SVG中，有两种主要的渐变类型：

线性渐变（linearGradient）
放射性渐变（radialGradient）
SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素

dom示例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6.     <title>CSS3渐变字体</title>
  7.     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8.     <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  9.     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.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>

以上就是css文字颜色渐变的三种实现方式（附代码）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！