笙亿网络策划

Tailwind CSS 怎么设置渐变颜色停止点？

约 1 分钟读完 6 阅
文章导读
上一个 测验 下一个 Tailwind CSS 渐变颜色停止点 是一个用于指定背景渐变中颜色停止点的实用工具。
📋 目录
  1. 壹 Tailwind CSS 渐变颜色停止点类
  2. 贰 Tailwind CSS 渐变颜色停止类功能
  3. 叁 Tailwind CSS 渐变颜色停止示例
  4. 肆 设置渐变起始颜色
  5. 伍 设置渐变结束颜色
  6. 陆 设置渐变中间颜色
A A

Tailwind CSS - 渐变颜色停止点

上一个
测验
下一个

Tailwind CSS 渐变颜色停止点 是一个用于指定背景渐变中颜色停止点的实用工具。

Tailwind CSS 渐变颜色停止点类

以下是用于设置背景渐变中颜色停止点的 Tailwind CSS Gradient Color Stops 类列表。

Tailwind CSS 渐变颜色停止类功能
  • from-*: 此 class 用于设置渐变的起始颜色。
  • to-*: 此 class 用于设置渐变的结束颜色。
  • via-*: 此 class 用于设置渐变的中間颜色。

注意： {*} 符号代表带有色调值的颜色，可以根据需要替换为上述颜色和色调值。

Tailwind CSS 渐变颜色停止示例

以下示例将演示渐变的各种颜色停止。

设置渐变起始颜色

下面的示例演示了 from-* class 的用法。

示例

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <h1 class="text-2xl font-bold mb-3">
        Tailwind CSS Gradient Color Start Example
    </h1>
    <div class="w-full h-16 border-2 rounded p-4
                bg-gradient-to-r from-green-500 ">
        from-green-500
    </div>
</body> 

</html>

设置渐变结束颜色

下面的示例演示了 to-* class 的用法。

示例

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <h1 class="text-2xl font-bold mb-3">
        Tailwind CSS Gradient Color End Example
    </h1>
    <div class="w-full h-16 border-2 rounded p-4
                bg-gradient-to-r from-green-500 to-lime-400">
        to-lime-400
    </div>
</body> 

</html>

设置渐变中间颜色

下面的示例演示了 via-* class 的用法。

示例

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4"> 
    <h1 class="text-2xl font-bold mb-3">
        Tailwind CSS Gradient Middle Color Example
    </h1>
    <div class="w-full h-16 border-2 rounded p-4
                bg-gradient-to-r from-green-500 via-lime-400 to-teal-200">
        via-lime-400
    </div>
</body> 

</html>