English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 背景与边框：颜色、渐变、圆角与边框控制

1. 背景颜色（bg-*）

bg-* 类设置元素的背景颜色，支持丰富的预设颜色和透明度。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景颜色演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础颜色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基础背景颜色</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-red-500 text-white p-4 rounded text-center">red-500</div>
        <div class="bg-blue-500 text-white p-4 rounded text-center">blue-500</div>
        <div class="bg-green-500 text-white p-4 rounded text-center">green-500</div>
        <div class="bg-yellow-500 text-white p-4 rounded text-center">yellow-500</div>
        <div class="bg-purple-500 text-white p-4 rounded text-center">purple-500</div>
        <div class="bg-pink-500 text-white p-4 rounded text-center">pink-500</div>
        <div class="bg-indigo-500 text-white p-4 rounded text-center">indigo-500</div>
        <div class="bg-gray-500 text-white p-4 rounded text-center">gray-500</div>
      </div>
    </div>

    <!-- 颜色梯度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">颜色梯度（50-950）</h3>
      <div class="space-y-2">
        <div class="bg-blue-50 text-blue-900 p-3 rounded">blue-50</div>
        <div class="bg-blue-100 text-blue-900 p-3 rounded">blue-100</div>
        <div class="bg-blue-200 text-blue-900 p-3 rounded">blue-200</div>
        <div class="bg-blue-300 text-blue-900 p-3 rounded">blue-300</div>
        <div class="bg-blue-400 text-white p-3 rounded">blue-400</div>
        <div class="bg-blue-500 text-white p-3 rounded">blue-500</div>
        <div class="bg-blue-600 text-white p-3 rounded">blue-600</div>
        <div class="bg-blue-700 text-white p-3 rounded">blue-700</div>
        <div class="bg-blue-800 text-white p-3 rounded">blue-800</div>
        <div class="bg-blue-900 text-white p-3 rounded">blue-900</div>
        <div class="bg-blue-950 text-white p-3 rounded">blue-950</div>
      </div>
    </div>

    <!-- 透明度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">背景透明度</h3>
      <div class="grid grid-cols-4 gap-4">
        <div class="bg-blue-500/100 text-blue-900 p-4 rounded text-center">/100</div>
        <div class="bg-blue-500/75 text-blue-900 p-4 rounded text-center">/75</div>
        <div class="bg-blue-500/50 text-blue-900 p-4 rounded text-center">/50</div>
        <div class="bg-blue-500/25 text-blue-900 p-4 rounded text-center">/25</div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 51 行（超过 40 行限制，仅展示）

背景颜色类名对照：

类名 CSS 值 说明
bg-red-500 background-color: #ef4444 红色背景
bg-blue-500 background-color: #3b82f6 蓝色背景
bg-transparent background-color: transparent 透明背景
bg-current background-color: currentColor 当前文字颜色
bg-white background-color: #fff 白色背景
bg-black background-color: #000 黑色背景
bg-blue-500/50 background-color: rgb(59 130 246 / 0.5) 50%透明蓝色

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 background-color 属性并记住十六进制色值，而 Tailwind 使用 bg-blue-500 等语义化类名直接声明。/50 语法支持透明度控制。

💡 提示： 颜色梯度从 50（最浅）到 950（最深），500 是标准色。使用 /透明度 语法可以快速调整透明度。

2. 渐变背景（bg-gradient-*）

渐变背景使用 bg-gradient-to-* 设置方向，配合 from-*、via-*、to-* 设置颜色。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渐变背景演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 线性渐变方向 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">线性渐变方向</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-r（向右）</div>
        <div class="bg-gradient-to-l from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-l（向左）</div>
        <div class="bg-gradient-to-b from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-b（向下）</div>
        <div class="bg-gradient-to-t from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-t（向上）</div>
        <div class="bg-gradient-to-br from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-br（右下）</div>
        <div class="bg-gradient-to-bl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-bl（左下）</div>
        <div class="bg-gradient-to-tr from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tr（右上）</div>
        <div class="bg-gradient-to-tl from-blue-500 to-purple-500 text-white p-6 rounded text-center">to-tl（左上）</div>
      </div>
    </div>

    <!-- 三色渐变 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">三色渐变（from-via-to）</h3>
      <div class="space-y-4">
        <div class="bg-gradient-to-r from-blue-500 via-green-500 to-purple-500 text-white p-6 rounded text-center">蓝 → 绿 → 紫</div>
        <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white p-6 rounded text-center">红 → 黄 → 绿</div>
        <div class="bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 text-white p-6 rounded text-center">粉 → 紫 → 靛</div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用</h3>
      <div class="space-y-4">
        <!-- 按钮渐变 -->
        <button class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          渐变按钮
        </button>
        <!-- 卡片渐变 -->
        <div class="bg-gradient-to-br from-cyan-500 to-blue-600 text-white p-6 rounded-lg">
          <h4 class="text-xl font-bold mb-2">渐变卡片</h4>
          <p class="opacity-90">使用渐变背景创建视觉吸引力</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 46 行（超过 40 行限制，仅展示）

渐变类名对照：

类名 CSS 值 说明
bg-gradient-to-r background-image: linear-gradient(to right, ...) 向右渐变
bg-gradient-to-l background-image: linear-gradient(to left, ...) 向左渐变
bg-gradient-to-b background-image: linear-gradient(to bottom, ...) 向下渐变
bg-gradient-to-t background-image: linear-gradient(to top, ...) 向上渐变
from-blue-500 --tw-gradient-from: #3b82f6 起始颜色
via-green-500 --tw-gradient-via: #22c55e 中间颜色
to-purple-500 --tw-gradient-to: #a855f7 结束颜色

传统 CSS vs Tailwind 传统方式需要在 CSS 中编写 background-image: linear-gradient(to right, #3b82f6, #a855f7) 属性，而 Tailwind 使用 bg-gradient-to-r from-blue-500 to-purple-500 类名直接声明。

💡 提示： via-* 是可选的中间颜色。不设置 via-* 时，渐变直接从 from-* 过渡到 to-*。

3. 背景图片（bg-*）

背景图片使用 bg-* 类设置图片路径、尺寸和位置。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景图片演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 背景图片尺寸 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">背景图片尺寸</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="h-48 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-cover</div>
        </div>
        <div class="h-48 bg-contain bg-center bg-no-repeat rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded">bg-contain</div>
        </div>
      </div>
    </div>

    <!-- 背景图片位置 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">背景图片位置</h3>
      <div class="grid grid-cols-3 gap-4">
        <div class="h-32 bg-cover bg-top rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-top</div>
        </div>
        <div class="h-32 bg-cover bg-center rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-center</div>
        </div>
        <div class="h-32 bg-cover bg-bottom rounded" style="background-image: url('https://picsum.photos/400/300')">
          <div class="h-full flex items-center justify-center bg-black/50 text-white rounded text-sm">bg-bottom</div>
        </div>
      </div>
    </div>

    <!-- Hero 区域 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Hero 区域示例</h3>
      <div class="h-64 bg-cover bg-center rounded-lg relative" style="background-image: url('https://picsum.photos/800/400')">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/80 to-purple-600/80 rounded-lg"></div>
        <div class="relative h-full flex flex-col items-center justify-center text-white">
          <h2 class="text-3xl font-bold mb-4">欢迎来到我们的网站</h2>
          <p class="text-lg opacity-90">使用 Tailwind CSS 创建精美的背景效果</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 48 行（超过 40 行限制，仅展示）

背景图片类名对照：

类名 CSS 值 说明
bg-cover background-size: cover 覆盖容器
bg-contain background-size: contain 包含在容器内
bg-auto background-size: auto 原始尺寸
bg-center background-position: center 居中定位
bg-top background-position: top 顶部定位
bg-bottom background-position: bottom 底部定位
bg-no-repeat background-repeat: no-repeat 不重复
bg-repeat background-repeat: repeat 重复（默认）

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 background-size、background-position、background-repeat 等多个属性，而 Tailwind 使用 bg-cover、bg-center、bg-no-repeat 等类名直接声明。

💡 提示： 使用 bg-gradient-to-r from-blue-600/80 to-purple-600/80 在背景图片上叠加渐变遮罩，增强文字可读性。

4. 圆角（rounded-*）

rounded-* 类设置元素的圆角大小。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>圆角演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础圆角 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基础圆角</h3>
      <div class="flex flex-wrap gap-4 items-end">
        <div class="w-24 h-24 bg-blue-500 rounded-none flex items-center justify-center text-white text-xs">rounded-none</div>
        <div class="w-24 h-24 bg-blue-500 rounded-sm flex items-center justify-center text-white text-xs">rounded-sm</div>
        <div class="w-24 h-24 bg-blue-500 rounded flex items-center justify-center text-white text-xs">rounded</div>
        <div class="w-24 h-24 bg-blue-500 rounded-md flex items-center justify-center text-white text-xs">rounded-md</div>
        <div class="w-24 h-24 bg-blue-500 rounded-lg flex items-center justify-center text-white text-xs">rounded-lg</div>
        <div class="w-24 h-24 bg-blue-500 rounded-xl flex items-center justify-center text-white text-xs">rounded-xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-2xl flex items-center justify-center text-white text-xs">rounded-2xl</div>
        <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center text-white text-xs">rounded-full</div>
      </div>
    </div>

    <!-- 单侧圆角 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">单侧圆角</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-500 rounded-t-lg flex items-center justify-center text-white text-sm">rounded-t-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-r-lg flex items-center justify-center text-white text-sm">rounded-r-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-b-lg flex items-center justify-center text-white text-sm">rounded-b-lg</div>
        <div class="w-32 h-24 bg-green-500 rounded-l-lg flex items-center justify-center text-white text-sm">rounded-l-lg</div>
      </div>
    </div>

    <!-- 单角圆角 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">单角圆角</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-500 rounded-tl-lg flex items-center justify-center text-white text-sm">rounded-tl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-tr-lg flex items-center justify-center text-white text-sm">rounded-tr-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-bl-lg flex items-center justify-center text-white text-sm">rounded-bl-lg</div>
        <div class="w-32 h-24 bg-purple-500 rounded-br-lg flex items-center justify-center text-white text-sm">rounded-br-lg</div>
      </div>
    </div>

    <!-- 实际应用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用</h3>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white">头像</div>
        <button class="bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700">圆角按钮</button>
        <div class="bg-gray-200 px-4 py-2 rounded-full text-sm">标签</div>
        <div class="bg-orange-500 w-4 h-4 rounded-full"></div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 53 行（超过 40 行限制，仅展示）

圆角类名对照：

类名 CSS 值 说明
rounded-none border-radius: 0 无圆角
rounded-sm border-radius: 0.125rem 小圆角
rounded border-radius: 0.25rem 默认圆角
rounded-md border-radius: 0.375rem 中等圆角
rounded-lg border-radius: 0.5rem 大圆角
rounded-xl border-radius: 0.75rem 超大圆角
rounded-2xl border-radius: 1rem 2倍超大圆角
rounded-full border-radius: 9999px 完全圆形
rounded-t-lg 上侧圆角 0.5rem 仅上侧
rounded-r-lg 右侧圆角 0.5rem 仅右侧
rounded-b-lg 下侧圆角 0.5rem 仅下侧
rounded-l-lg 左侧圆角 0.5rem 仅左侧
rounded-tl-lg 左上圆角 0.5rem 仅左上角
rounded-tr-lg 右上圆角 0.5rem 仅右上角
rounded-bl-lg 左下圆角 0.5rem 仅左下角
rounded-br-lg 右下圆角 0.5rem 仅右下角

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 border-radius 属性，而 Tailwind 使用 rounded-lg、rounded-full 等类名直接声明。单侧/单角圆角使用 rounded-t-lg、rounded-tl-lg 等。

💡 提示： rounded-full 用于创建圆形头像、圆形按钮等。配合固定宽高可以创建完美的圆形。

5. 边框（border-*）

border-* 类设置元素的边框宽度、颜色和样式。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边框演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 边框宽度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">边框宽度</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-0 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-0</div>
        <div class="w-24 h-24 border border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border</div>
        <div class="w-24 h-24 border-2 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-2</div>
        <div class="w-24 h-24 border-4 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-4</div>
        <div class="w-24 h-24 border-8 border-blue-500 bg-blue-50 flex items-center justify-center text-xs">border-8</div>
      </div>
    </div>

    <!-- 边框颜色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">边框颜色</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 border-2 border-red-500 flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 border-2 border-blue-500 flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 border-2 border-green-500 flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 border-2 border-purple-500 flex items-center justify-center text-xs">purple</div>
        <div class="w-24 h-24 border-2 border-gray-300 flex items-center justify-center text-xs">gray</div>
      </div>
    </div>

    <!-- 单侧边框 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">单侧边框</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-t-4 border-blue-500 flex items-center justify-center text-sm">border-t-4</div>
        <div class="w-32 h-24 border-r-4 border-green-500 flex items-center justify-center text-sm">border-r-4</div>
        <div class="w-32 h-24 border-b-4 border-purple-500 flex items-center justify-center text-sm">border-b-4</div>
        <div class="w-32 h-24 border-l-4 border-orange-500 flex items-center justify-center text-sm">border-l-4</div>
      </div>
    </div>

    <!-- 边框样式 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">边框样式</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 border-2 border-solid border-blue-500 flex items-center justify-center text-sm">border-solid</div>
        <div class="w-32 h-24 border-2 border-dashed border-blue-500 flex items-center justify-center text-sm">border-dashed</div>
        <div class="w-32 h-24 border-2 border-dotted border-blue-500 flex items-center justify-center text-sm">border-dotted</div>
        <div class="w-32 h-24 border-2 border-double border-blue-500 flex items-center justify-center text-sm">border-double</div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 51 行（超过 40 行限制，仅展示）

边框类名对照：

类名 CSS 值 说明
border-0 border-width: 0 无边框
border border-width: 1px 1px边框
border-2 border-width: 2px 2px边框
border-4 border-width: 4px 4px边框
border-8 border-width: 8px 8px边框
border-blue-500 border-color: #3b82f6 蓝色边框
border-t-4 border-top-width: 4px 上边框4px
border-solid border-style: solid 实线边框
border-dashed border-style: dashed 虚线边框
border-dotted border-style: dotted 点线边框

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 border-width、border-color、border-style 等多个属性，而 Tailwind 使用 border-2、border-blue-500、border-dashed 等类名直接声明。

6. 分割线（divide-*）

divide-* 类在子元素之间添加分割线，无需为每个子元素单独设置边框。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分割线演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 垂直分割线 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">垂直分割线（子元素水平排列）</h3>
      <div class="flex divide-x divide-gray-300">
        <div class="flex-1 p-4 text-center">项目 1</div>
        <div class="flex-1 p-4 text-center">项目 2</div>
        <div class="flex-1 p-4 text-center">项目 3</div>
        <div class="flex-1 p-4 text-center">项目 4</div>
      </div>
    </div>

    <!-- 水平分割线 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">水平分割线（子元素垂直排列）</h3>
      <div class="divide-y divide-gray-300">
        <div class="p-4">项目 1</div>
        <div class="p-4">项目 2</div>
        <div class="p-4">项目 3</div>
        <div class="p-4">项目 4</div>
      </div>
    </div>

    <!-- 不同颜色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">不同颜色分割线</h3>
      <div class="space-y-4">
        <div class="divide-y divide-blue-300">
          <div class="p-3">蓝色分割线</div>
          <div class="p-3">项目 2</div>
        </div>
        <div class="divide-y divide-green-300">
          <div class="p-3">绿色分割线</div>
          <div class="p-3">项目 2</div>
        </div>
        <div class="divide-y divide-purple-300">
          <div class="p-3">紫色分割线</div>
          <div class="p-3">项目 2</div>
        </div>
      </div>
    </div>

    <!-- 实际应用：列表 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用：列表</h3>
      <div class="divide-y divide-gray-200">
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">John Doe</div>
            <div class="text-sm text-gray-500">john@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">编辑</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Jane Smith</div>
            <div class="text-sm text-gray-500">jane@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">编辑</button>
        </div>
        <div class="py-4 flex justify-between items-center">
          <div>
            <div class="font-semibold">Bob Johnson</div>
            <div class="text-sm text-gray-500">bob@example.com</div>
          </div>
          <button class="text-blue-600 text-sm">编辑</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 74 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要为每个子元素设置 border-bottom，并处理最后一个元素的边框。Tailwind 的 divide-* 自动在子元素之间添加分割线，无需额外处理。

💡 提示： divide-y 在子元素之间添加水平分割线，divide-x 在子元素之间添加垂直分割线。注意方向与 flex 方向相反。

7. 轮廓环（ring-*）

ring-* 类在元素周围添加轮廓环，类似 outline 但使用 box-shadow 实现，不影响布局。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮廓环演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础环 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基础轮廓环</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-1 ring-blue-500 rounded flex items-center justify-center text-xs">ring-1</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">ring-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-4 ring-blue-500 rounded flex items-center justify-center text-xs">ring-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-8 ring-blue-500 rounded flex items-center justify-center text-xs">ring-8</div>
      </div>
    </div>

    <!-- 环颜色 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">轮廓环颜色</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-red-50 ring-2 ring-red-500 rounded flex items-center justify-center text-xs">red</div>
        <div class="w-24 h-24 bg-blue-50 ring-2 ring-blue-500 rounded flex items-center justify-center text-xs">blue</div>
        <div class="w-24 h-24 bg-green-50 ring-2 ring-green-500 rounded flex items-center justify-center text-xs">green</div>
        <div class="w-24 h-24 bg-purple-50 ring-2 ring-purple-500 rounded flex items-center justify-center text-xs">purple</div>
      </div>
    </div>

    <!-- ring-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ring-offset（偏移环）</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-2 rounded flex items-center justify-center text-xs">offset-2</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-4 rounded flex items-center justify-center text-xs">offset-4</div>
        <div class="w-24 h-24 bg-blue-100 ring-2 ring-blue-500 ring-offset-8 rounded flex items-center justify-center text-xs">offset-8</div>
      </div>
    </div>

    <!-- 实际应用：焦点状态 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用：焦点状态</h3>
      <div class="space-y-4">
        <input type="text" placeholder="点击查看焦点效果" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg ring-2 ring-blue-600 ring-offset-2 hover:bg-blue-700">
          带环按钮
        </button>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 48 行（超过 40 行限制，仅展示）

轮廓环类名对照：

类名 CSS 值 说明
ring-0 box-shadow: 0 0 0 0px ... 无环
ring-1 box-shadow: 0 0 0 1px ... 1px环
ring-2 box-shadow: 0 0 0 2px ... 2px环
ring-4 box-shadow: 0 0 0 4px ... 4px环
ring-8 box-shadow: 0 0 0 8px ... 8px环
ring-blue-500 --tw-ring-color: #3b82f6 蓝色环
ring-offset-2 box-shadow: 0 0 0 2px white, 0 0 0 4px ... 2px偏移
ring-offset-4 box-shadow: 0 0 0 4px white, 0 0 0 8px ... 4px偏移

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 box-shadow 或 outline 属性，而 Tailwind 使用 ring-2、ring-blue-500、ring-offset-2 等类名直接声明。ring-* 使用 box-shadow 实现，不影响布局。

💡 提示： ring-* 常用于焦点状态（focus:ring-2）和选中状态。ring-offset-* 在环和元素之间创建间隙。

8. Outline

outline-* 类设置元素的轮廓线，类似 ring-* 但使用原生 outline 属性。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Outline 演示</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基础 outline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基础 Outline</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-blue-100 outline outline-1 outline-blue-500 rounded flex items-center justify-center text-sm">outline-1</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-2 outline-blue-500 rounded flex items-center justify-center text-sm">outline-2</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-4 outline-blue-500 rounded flex items-center justify-center text-sm">outline-4</div>
        <div class="w-32 h-24 bg-blue-100 outline outline-8 outline-blue-500 rounded flex items-center justify-center text-sm">outline-8</div>
      </div>
    </div>

    <!-- outline-offset -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">outline-offset</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-0 rounded flex items-center justify-center text-sm">offset-0</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-2 rounded flex items-center justify-center text-sm">offset-2</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-4 rounded flex items-center justify-center text-sm">offset-4</div>
        <div class="w-32 h-24 bg-green-100 outline outline-2 outline-green-500 outline-offset-8 rounded flex items-center justify-center text-sm">offset-8</div>
      </div>
    </div>

    <!-- outline 样式 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Outline 样式</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dashed outline-purple-500 rounded flex items-center justify-center text-sm">dashed</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-dotted outline-purple-500 rounded flex items-center justify-center text-sm">dotted</div>
        <div class="w-32 h-24 bg-purple-100 outline outline-2 outline-double outline-purple-500 rounded flex items-center justify-center text-sm">double</div>
      </div>
    </div>

    <!-- 实际应用：焦点状态 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">实际应用：焦点状态</h3>
      <div class="space-y-4">
        <input type="text" placeholder="点击查看焦点效果" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        <button class="bg-blue-600 text-white px-6 py-2 rounded-lg outline outline-2 outline-offset-2 outline-blue-600 hover:bg-blue-700">
          带 Outline 按钮
        </button>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 48 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要在 CSS 中设置 outline-width、outline-color、outline-style、outline-offset 等多个属性，而 Tailwind 使用 outline-2、outline-blue-500、outline-offset-2 等类名直接声明。

⚠️ 注意： outline 不影响布局（不占用空间），常用于焦点状态。ring 使用 box-shadow 实现，也不影响布局。两者可以配合使用。

9. 综合示例

结合以上所有知识点，创建一个完整的背景与边框示例。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景与边框综合示例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 渐变卡片 -->
    <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
      <h2 class="text-3xl font-bold mb-4">渐变卡片</h2>
      <p class="opacity-90 mb-6">使用渐变背景、圆角和阴影创建精美的卡片</p>
      <button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition-colors">
        立即开始
      </button>
    </div>

    <!-- 带边框的表单 -->
    <div class="bg-white rounded-xl shadow-lg p-8 border border-gray-200">
      <h3 class="text-xl font-semibold mb-6 pb-4 border-b border-gray-200">登录表单</h3>
      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
          <input type="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
          <input type="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all">
        </div>
        <button class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all">
          登录
        </button>
      </div>
    </div>

    <!-- 特性列表 -->
    <div class="bg-white rounded-xl shadow-lg divide-y divide-gray-200">
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-blue-100 rounded-full ring-2 ring-blue-500 flex items-center justify-center">
          <span class="text-blue-600 text-xl">1</span>
        </div>
        <div>
          <h4 class="font-semibold">渐变背景</h4>
          <p class="text-sm text-gray-600">支持多方向、多颜色渐变</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-green-100 rounded-full ring-2 ring-green-500 flex items-center justify-center">
          <span class="text-green-600 text-xl">2</span>
        </div>
        <div>
          <h4 class="font-semibold">圆角边框</h4>
          <p class="text-sm text-gray-600">灵活的圆角和边框控制</p>
        </div>
      </div>
      <div class="p-6 flex items-center gap-4">
        <div class="w-12 h-12 bg-purple-100 rounded-full ring-2 ring-purple-500 flex items-center justify-center">
          <span class="text-purple-600 text-xl">3</span>
        </div>
        <div>
          <h4 class="font-semibold">轮廓环</h4>
          <p class="text-sm text-gray-600">焦点状态和选中效果</p>
        </div>
      </div>
    </div>

    <!-- 网格图片 -->
    <div class="grid grid-cols-3 gap-4">
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=1')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=2')"></div>
      <div class="bg-cover bg-center h-48 rounded-xl ring-2 ring-white shadow-lg" style="background-image: url('https://picsum.photos/300/200?random=3')"></div>
    </div>
  </div>
</body>
</html>
逻辑代码 70 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写大量 CSS 来实现渐变卡片、表单样式、分割线列表等效果，而 Tailwind 使用背景、边框、圆角等工具类直接在 HTML 中完成。

❓ 常见问题

Q ring 和 outline 有什么区别？
A ring 使用 box-shadow 实现，支持 ring-offset 偏移。outline 使用原生 outline 属性，支持 outline-offset。两者都不影响布局。推荐使用 ring 处理焦点状态，outline 处理原生轮廓。
Q 如何实现渐变文字？
A 使用 bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent 实现。bg-clip-text 将背景裁剪到文字区域，text-transparent 使文字透明以显示背景渐变。
Q divide-y 的方向为什么和 flex 方向相反？
A divide-y 在子元素之间添加水平分割线，适合垂直排列的子元素。divide-x 在子元素之间添加垂直分割线，适合水平排列的子元素。方向与 flex 方向相反才能正确显示。
Q rounded-full 为什么能创建圆形？
A rounded-full 设置 border-radius: 9999px，当元素宽高相等时，9999px 远大于元素尺寸，浏览器会自动计算为 50%，形成完美圆形。

📖 小节

📝 作业

  1. ⭐ 创建一个渐变按钮，使用 bg-gradient-to-r from-blue-600 to-purple-600 和 rounded-full 实现

  2. ⭐⭐ 创建一个用户列表，使用 divide-y divide-gray-200 添加分割线，每个用户项包含圆形头像（rounded-full）和信息

  3. ⭐⭐⭐ 创建一个登录页面，包含渐变背景、带边框的表单卡片、焦点状态的输入框（focus:ring-2）和圆角按钮

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏