css实现文字渐变

. . . . .2025-06-02 14:46

在前端开发中，给文字设置渐变色 是完全可以实现的，常用的方式是结合 CSS 的 background、-webkit-background-clip 和 -webkit-text-fill-color 属性。下面是一个常见的实现方法：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文字渐变色示例</title>
  <style>
    .gradient-text {
      font-size: 48px;
      font-weight: bold;
      background: linear-gradient(90deg, #ff7e5f, #feb47b);
      /* 背景裁剪到文字 */
      -webkit-background-clip: text;
      /* 文字填充色设置为透明，显示背景 */
      -webkit-text-fill-color: transparent;

      /* 兼容 Firefox */
      background-clip: text;
      color: transparent;
    }
  </style>
</head>
<body>
  // 注意div可能存在问题，因为div是块状元素，占据整行，在文字部分可能还没有体现出渐变来呢
  <span class="gradient-text">渐变色文字效果</span>
</body>
</html>

说明：

background: linear-gradient(...) 设置渐变背景。
-webkit-background-clip: text 让背景只显示在文字上（Safari/Chrome）。
-webkit-text-fill-color: transparent 让文字本身变透明，只显示背景色。
background-clip: text 和 color: transparent 用于兼容部分浏览器（如 Firefox）。

注意事项：

这种方式在大部分现代浏览器（Chrome、Safari、Edge、Firefox）都能生效，但在部分老旧浏览器（如 IE）可能不支持。
你可以自由调整渐变的颜色、方向等参数。