对文字颜色从左到右（横向）渐变的一点理解（坑）

最新推荐文章于 2023-04-20 16:17:55 发布

weixin_30751947

最新推荐文章于 2023-04-20 16:17:55 发布

阅读量355

点赞数

文章标签： php

原文链接：https://juejin.im/post/5a62d548f265da3e4d72ca40

版权

大家对于背景颜色渐变可能比较了解，网上资料也很多。但是对于文本文字的渐变相对比较少，文本文字颜色的横向渐变资料（坑）就更少。本文就是介绍文本文字颜色横向渐变遇到的坑。

话不多说，直接上效果图，一图胜过千言万语：

代码如下：

<html>
<head>
  <title>css样式demo</title>
  <style type="text/css">
   .changeColor {
      margin-top: 50px;
      font-size: 30px;
      font-weight: bold;
      width: 300px;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-image: linear-gradient(90deg, #0F0, #f00 );
    }
  </style>
</head>
<body>
   <div class="changeColor">文字的颜色渐变demo</div>
</body>
</html>
复制代码

关键代码就是css里面的最后四行（或者说是最后倒数第四行的width属性和最后一行的角度，因为另外两行你能比较容易搜到答案）！一个块级div，如果不设置（限制）div盒子宽度，并且屏幕很大的话（比如1920px，而你的文字（很少，只有几个而已）只有（文字大小* 文字个数）px，这个div默认独占一行，你根本看不出文字横向渐变效果。

颜色渐变如果不设置角度和方向，默认是从上到下（竖向）的，而竖向的情况下无需设置宽度就能看到渐变效果，此时就要考虑盒子的高度问题了。

总结：关于文字渐变

-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(90deg, #0F0, #f00 );

就是跟这三个属性相关。至于他们能否生效还要看你的盒子宽度和高度是否过大同时你的文字又太少导致看不到明显效果，是否需要设置具体的值，看具体情况。

参考文章：张鑫旭的文字颜色渐变 www.zhangxinxu.com/wordpress/2…

css3教程：background-image之线性渐变（linear-gradient)最新版！ www.mrszhao.com/post/58.htm…

转载于:https://juejin.im/post/5a62d548f265da3e4d72ca40