第 1 节 概述
如果把页面比作房间，那边框就是墙线，圆角就是家具的边角处理，阴影就是物体投射的光影。
这些细节单个看微乎其微，但加在一起就决定了页面的质感——专业和业余的差别往往就在这里。
第 2 节 圆角
Tailwind 的圆角从 rounded-none 到 rounded-full：
1
2
3
4
5
6
7
8
9
| <button class="rounded-none">直角</button>
<button class="rounded-sm">小圆角（2px）</button>
<button class="rounded">默认圆角（4px）</button>
<button class="rounded-md">中圆角（6px）</button>
<button class="rounded-lg">大圆角（8px）</button>
<button class="rounded-xl">超大圆角（12px）</button>
<button class="rounded-2xl">超大圆角（16px）</button>
<button class="rounded-3xl">超大圆角（24px）</button>
<button class="rounded-full">完全圆形（9999px）</button>
|
技巧
不用担心 v4 中 rounded-sm 等名称的变化，它们只是语义调整，日常使用用 rounded-lg 做卡片、rounded-full 做头像就足够了。
2.1 单独控制四个角
1
2
3
4
5
6
7
8
9
| <div class="rounded-t-lg">只圆顶部两个角</div>
<div class="rounded-b-lg">只圆底部两个角</div>
<div class="rounded-l-lg">只圆左边两个角</div>
<div class="rounded-r-lg">只圆右边两个角</div>
<div class="rounded-tl-lg">左上角</div>
<div class="rounded-tr-lg">右上角</div>
<div class="rounded-bl-lg">左下角</div>
<div class="rounded-br-lg">右下角</div>
|
第 3 节 边框
3.1 边框宽度
1
2
3
4
5
| <div class="border">1px 边框（默认）</div>
<div class="border-0">无边框</div>
<div class="border-2">2px 边框</div>
<div class="border-4">4px 边框</div>
<div class="border-8">8px 边框</div>
|
3.2 单独控制边
1
2
3
4
5
6
| <div class="border-t">上边框</div>
<div class="border-b">下边框</div>
<div class="border-l">左边框</div>
<div class="border-r">右边框</div>
<div class="border-x">左右边框</div>
<div class="border-y">上下边框</div>
|
3.3 边框颜色
1
2
3
4
| <div class="border border-gray-200">浅灰色边框，最常用</div>
<div class="border-2 border-blue-500">蓝色边框，强调</div>
<div class="border border-red-500">红色边框，错误状态</div>
<div class="border-b-2 border-blue-600">底部蓝色边框，常用于导航激活态</div>
|
3.4 边框样式
1
2
3
4
| <div class="border border-dashed">虚线边框</div>
<div class="border border-dotted">点状边框</div>
<div class="border border-double">双线边框</div>
<div class="border border-none">无边框</div>
|
3.5 分隔线（divide）
分隔线是给相邻子元素之间加边框，而不是给元素本身加：
1
2
3
4
5
| <div class="divide-y divide-gray-200">
<div class="py-3">项目 1</div>
<div class="py-3">项目 2</div>
<div class="py-3">项目 3</div>
</div>
|
divide-y 在每个元素之间加水平线，divide-x 加垂直线。很适合列表、菜单项。
第 4 节 阴影
4.1 阴影大小
1
2
3
4
5
6
7
8
| <div class="shadow-xs">极小阴影</div>
<div class="shadow-sm">小阴影</div>
<div class="shadow-md">中阴影（常用）</div>
<div class="shadow-lg">大阴影（卡片常用）</div>
<div class="shadow-xl">超大阴影</div>
<div class="shadow-2xl">特大阴影</div>
<div class="shadow-inner">内阴影</div>
<div class="shadow-none">无阴影</div>
|
技巧
卡片用 shadow-md 或 shadow-lg，按钮用 shadow-sm，下拉菜单用 shadow-xl。内阴影 shadow-inner 用于凹陷效果，比如输入框。
4.2 阴影颜色
1
2
3
| <button class="bg-blue-600 text-white px-6 py-3 rounded-lg shadow-lg shadow-blue-600/30">
蓝色按钮，投射蓝色阴影
</button>
|
彩色阴影能让按钮看起来更有整体感，但不要过度使用。
第 5 节 环（Ring）
Ring 是一种特殊的"边框"，用阴影实现，不占用元素尺寸：
1
2
3
4
5
6
7
| <!-- 输入框聚焦状态 -->
<input class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-hidden" />
<!-- 按钮焦点样式 -->
<button class="focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
点击我
</button>
|
Ring 的常见搭配：
| 类名 | 效果 |
|---|
ring-2 | 2px 宽的环 |
ring-blue-500 | 蓝色环 |
ring-offset-2 | 环距离元素 2px |
focus:ring-2 | 聚焦时才显示 |
第 6 节 轮廓（Outline）
Outline 和 border 类似，但不占布局空间，常用在焦点样式上：
1
2
3
4
| <!-- v4 中 outline-hidden 代替了 v3 的 outline-none -->
<button class="outline-hidden focus-visible:outline-2 focus-visible:outline-blue-500">
按钮
</button>
|
注意
v4 中 outline-none 的作用变了。如果想去掉默认的 focus outline，用 outline-hidden。而 outline 默认宽度为 1px。
第 7 节 实战：给产品页增加质感
把之前的产品页卡片加上边框和阴影：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星光科技 · 智能灯</title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<nav class="fixed top-0 inset-x-0 bg-white/80 backdrop-blur-sm border-b border-gray-100 z-50">
<div class="max-w-5xl mx-auto flex items-center justify-between px-6 h-16">
<span class="text-xl font-bold text-gray-900">星光科技</span>
<div class="flex gap-8 text-gray-600">
<a href="#" class="hover:text-gray-900">产品</a>
<a href="#" class="hover:text-gray-900">特性</a>
<a href="#" class="hover:text-gray-900">用户评价</a>
<a href="#" class="hover:text-gray-900">联系我们</a>
</div>
</div>
</nav>
<main class="max-w-5xl mx-auto px-6 pt-32 pb-16">
<div class="flex flex-col items-center text-center">
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight">
智能台灯 <span class="text-blue-600">Lumina</span>
</h1>
<p class="mt-6 text-xl text-gray-500 leading-relaxed max-w-2xl">
光线随你而变。一盏懂你的台灯。
</p>
<button class="mt-8 px-8 py-4 bg-blue-600 text-white text-lg font-semibold rounded-xl shadow-lg shadow-blue-600/30 hover:bg-blue-700 hover:shadow-xl hover:shadow-blue-600/40">
立即购买
</button>
</div>
<!-- 特性卡片 -->
<section class="mt-32">
<h2 class="text-3xl font-bold text-gray-900 text-center">为什么选择 Lumina</h2>
<div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="p-6 bg-white rounded-2xl border border-gray-100 shadow-md hover:shadow-lg">
<div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
<span class="text-2xl">🧠</span>
</div>
<h3 class="mt-4 text-xl font-semibold text-gray-900">AI 调光</h3>
<p class="mt-2 text-gray-500 leading-relaxed">
内置传感器实时感知环境光线，自动调整亮度和色温。
</p>
</div>
<div class="p-6 bg-white rounded-2xl border border-gray-100 shadow-md hover:shadow-lg">
<div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
<span class="text-2xl">👁️</span>
</div>
<h3 class="mt-4 text-xl font-semibold text-gray-900">护眼模式</h3>
<p class="mt-2 text-gray-500 leading-relaxed">
无频闪、低蓝光，通过德国莱茵 TÜV 护眼认证。
</p>
</div>
<div class="p-6 bg-white rounded-2xl border border-gray-100 shadow-md hover:shadow-lg">
<div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
<span class="text-2xl">🎤</span>
</div>
<h3 class="mt-4 text-xl font-semibold text-gray-900">语音控制</h3>
<p class="mt-2 text-gray-500 leading-relaxed">
支持 Siri、小爱同学、Google Assistant 语音指令。
</p>
</div>
</div>
</section>
<!-- 用户评价 -->
<section class="mt-32">
<h2 class="text-3xl font-bold text-gray-900 text-center">用户评价</h2>
<div class="mt-12 divide-y divide-gray-100">
<div class="py-6 flex gap-4">
<img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/48?img=1" alt="用户" />
<div>
<p class="font-semibold text-gray-900">设计师小王</p>
<p class="mt-1 text-gray-500">"用了两周，眼睛舒服多了。AI 调光真的很智能。"</p>
</div>
</div>
<div class="py-6 flex gap-4">
<img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/48?img=2" alt="用户" />
<div>
<p class="font-semibold text-gray-900">程序员大刘</p>
<p class="mt-1 text-gray-500">"晚上写代码的时候，灯光会自动变暖，不刺眼。"</p>
</div>
</div>
<div class="py-6 flex gap-4">
<img class="w-12 h-12 rounded-full" src="https://i.pravatar.cc/48?img=3" alt="用户" />
<div>
<p class="font-semibold text-gray-900">学生小林</p>
<p class="mt-1 text-gray-500">"期末复习全靠它了，灯光可以跟着时间变化。"</p>
</div>
</div>
</div>
</section>
<footer class="mt-32 pt-8 border-t border-gray-100 flex items-center justify-between text-sm text-gray-400">
<span>© 2026 星光科技</span>
<div class="flex gap-6">
<a href="#" class="hover:text-gray-600">隐私政策</a>
<a href="#" class="hover:text-gray-600">服务条款</a>
</div>
</footer>
</main>
</body>
</html>
|
这次的变化：
- 特性卡片加了
bg-white rounded-2xl border border-gray-100 shadow-md，从纯灰块变成了带阴影的白色卡片 - 按钮加了
shadow-lg shadow-blue-600/30（蓝色阴影），并在 hover 时加深 - 用户评价区用了
divide-y divide-gray-100，在评价之间自动生成分隔线 - 头像用
rounded-full 变成圆形
本章小结
- 圆角用
rounded-*，rounded-lg 做卡片，rounded-full 做头像 - 边框用
border-*，border-gray-200 是最常用的中性边框色 - 分隔线
divide-y 给相邻元素之间加线 - 阴影
shadow-md 到 shadow-xl 提升元素的层级感 - 环
ring 用于焦点样式，不占布局空间 hover:shadow-lg 实现悬停时阴影加深的交互反馈
卡片有了立体感，但页面色彩还不够丰富。下一篇给页面加上渐变背景和滤镜效果。
Aphros 收录于 网页开发 和 Tailwind CSS