【css】实现渐变文字效果（linear-gradient&radial-gradient）

效果图

实现方法

关键代码：

    background: linear-gradient(0deg,#d3ae13 0%,white 44%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

注释掉：-webkit-background-clip: text;这行之后，下图就是待叠加的样式。（有点类似PS的蒙版或者图层叠加之类的）

linear-gradient

linear-gradient() 是CSS的一个渐变函数，用于在元素的背景中创建线性渐变效果。它可以让你在元素的背景中实现从一种颜色到另一种颜色的平滑过渡。

• 该函数可以接受多个参数，其中最重要的是方向 和颜色。

  • 方向参数可以指定渐变的方向。
    • 使用角度值（如45deg表示从左上角到右下角）
    • 关键词（如to right表示从左到右）来定义方向。例如：
  • 颜色参数可以指定渐变的起始颜色和结束颜色，也可以包含中间的颜色位置。
    • 你可以使用具体的颜色值（如红色、#ff0000）
    • 使用颜色关键词（如red、blue）来定义颜色。你还可以通过设置百分比或距离值来指定中间颜色的位置。例如：

background: linear-gradient(red, yellow 50%, green);

此示例将创建一个从红色到绿色的渐变，中间经过黄色，黄色占据整个渐变的50%位置。

通过构建背景图学习CSS径向渐变

补充一个径向渐变的教程，用来做一些平铺背景还是蛮好看和实用的。

参考

用css实现文字字体颜色渐变的三种方法 不知道为什么使用 background-clip 这个属性时不能生效。所以没有用这个方法。