领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

Tailwind CSS 颜色介绍—渐变（css color 渐变）

nixiaole 2025-05-08 20:32:47 知识剖析 3 ℃

1.bg-gradient

普通渐变

1.bg-gradient-to-{方向}

t (top)
b (bottom)
l (left)
r (right)
2.设置起始颜色 中间颜色和结束颜色
from-blue-500 (开始颜色)
via-purple-500 (中间颜色)
to-pink-500 (结束颜色)
备注:中间颜色是可选的

举例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body>
  <div class="grid grid-cols-2 grid-rows-2 gap-y-4 ml-20 mx-auto">
    <div class="w-40 h-40 bg-gradient-to-t from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-t
    </div>
    <div class="w-40 h-40 bg-gradient-to-b from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-b
    </div>
    <div class="w-40 h-40 bg-gradient-to-l from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-l
    </div>
    <div class="w-40 h-40 bg-gradient-to-r from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-r
    </div>
  </div>
</body>
</html>

bg-linear 支持更多的渐变方向

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body>
  <div class="grid grid-cols-4 grid-rows-2 gap-y-4 ml-20 mx-auto">
    <div class="w-40 h-40 bg-linear-to-t from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-t
    </div>
    <div class="w-40 h-40 bg-linear-to-tr from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-tr
    </div>
    <div class="w-40 h-40 bg-linear-to-r from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-r
    </div>
    <div class="w-40 h-40 bg-linear-to-br from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-br
    </div>
    <div class="w-40 h-40 bg-linear-to-b from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-b
    </div>
    <div class="w-40 h-40 bg-linear-to-bl from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-bl
    </div>
    <div class="w-40 h-40 bg-linear-to-l from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-l
    </div>
    <div class="w-40 h-40 bg-linear-to-tl from-blue-500 via-purple-500
               to-pink-500">
      bg-gradient-to-tl
    </div>
  </div>
</body>
</html>

2.bg-radial

基于中心向外渐变

举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="grid grid-cols-3 ml-20 mx-auto">

<div class="size-24 rounded-full bg-radial from-blue-600 to-green-400"></div>
<div class="size-24 rounded-full bg-radial-[at_50%_75%] from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-violet-700 via-lime-300 to-violet-700"></div>
</div>
</body>
</html>

3.bg-conic

基于角度渐变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="grid grid-cols-3 ml-20 mx-auto">

<div class="size-24 rounded-full bg-conic from-blue-600 to-green-400"></div>
<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
<div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>

</div>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表