Tailwind CSS - 渐变颜色停止点

Tailwind CSS：渐变色标

渐变是创建现代、生动设计的一个强大工具。Tailwind CSS 提供了一套直观的功能类，通过定义其方向和色标来创建线性、径向和圆锥渐变。

渐变结构解析

在 Tailwind 中创建渐变涉及三种主要类型的功能类：

• 方向 (bg-gradient-to-{direction}): 指定渐变的角度或形状。例如，bg-gradient-to-r 创建一个从左到右流动的渐变。其他方向包括 t（顶部）、b（底部）、l（左侧）以及 tr（右上）等对角线方向。还有用于 bg-radial 和 bg-conic 的功能类。
• 起始颜色 (from-{color}): 设置渐变的起始颜色。您可以使用主题调色板中的任何颜色。
• 结束颜色 (to-{color}): 设置渐变的结束颜色。
• 中间颜色 (via-{color}): (可选) 添加一个或多个中间颜色，创建多色渐变。

您还可以使用基于百分比的功能类（如 from-10%、via-50% 或 to-90%）指定色标的位置，以实现更精确的控制。

渐变色标参考

这里没有详尽的列表，而是这些功能类的模式。将 {color} 替换为您调色板中的颜色（例如 blue-500、pink-300），将 {percentage} 替换为间距比例中的值（例如 10、50、90）。

类模式	用途	示例
from-{color}	设置起始颜色。	from-emerald-400
via-{color}	设置可选的中间颜色。	via-cyan-500
to-{color}	设置结束颜色。	to-blue-600
from-{percentage}%	设置 from 颜色的起始位置。	from-10%
via-{percentage}%	设置 via 颜色的位置。	via-45%
to-{percentage}%	设置 to 颜色的结束位置。	to-90%

实际应用：UI 组件

让我们将这些功能类应用于创建一个生动的按钮和渐变文本效果，这在现代网页设计中很常见。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Gradient Example</title>
</head>
<body class="bg-slate-900 text-white flex flex-col items-center justify-center min-h-screen p-8 gap-12">

    <!-- 示例 1：带悬停效果的渐变按钮 -->
    <button class="px-8 py-4 font-bold rounded-lg text-white
                   bg-gradient-to-br from-pink-500 via-red-500 to-yellow-500
                   background-size-200
                   hover:bg-right-center transition-all duration-500">
        Hover Me
    </button>

    <!-- 示例 2：渐变文本 -->
    <h1 class="text-6xl font-black text-transparent
               bg-clip-text
               bg-gradient-to-r from-emerald-400 to-cyan-400">
        Gradient Text
    </h1>

</body>

<!-- 按钮悬停效果的自定义功能类 -->
<style type="text/tailwindcss">
    @layer utilities {
      .background-size-200 {
        background-size: 200% auto;
      }
      .bg-right-center {
        background-position: right center;
      }
    }
</style>
</html>

专业提示：渐变为透明

一个常见的用例是将图像或区域渐变为背景。您可以通过将 to 或 via 颜色设置为 transparent 来实现。如果未指定 to 颜色，Tailwind 会自动将 from 颜色渐变为其完全透明的版本。

<!-- 此 div 将有一个从 blue-500 到透明的渐变 -->
<div class="h-32 bg-gradient-to-t from-blue-500"></div>

<!-- 您也可以明确指定 -->
<div class="h-32 bg-gradient-to-t from-blue-500 to-transparent"></div>