# 边框阴影——画龙点睛的细节 ## 概述 如果把页面比作房间，那边框就是墙线，圆角就是家具的边角处理，阴影就是物体投射的光影。 这些细节单个看微乎其微，但加在一起就决定了页面的**质感**——专业和业余的差别往往就在这里。 ## 圆角 Tailwind 的圆角从 `rounded-none` 到 `rounded-full`： ```html ``` > [!tip] 技巧 > 不用担心 v4 中 `rounded-sm` 等名称的变化，它们只是语义调整，日常使用用 `rounded-lg` 做卡片、`rounded-full` 做头像就足够了。 ![](images/05-border-radius.svg) ### 单独控制四个角 ```html
只圆顶部两个角
只圆底部两个角
只圆左边两个角
只圆右边两个角
左上角
右上角
左下角
右下角
``` ## 边框 ### 边框宽度 ```html
1px 边框（默认）
无边框
2px 边框
4px 边框
8px 边框
``` ### 单独控制边 ```html
上边框
下边框
左边框
右边框
左右边框
上下边框
``` ### 边框颜色 ```html
浅灰色边框，最常用
蓝色边框，强调
红色边框，错误状态
底部蓝色边框，常用于导航激活态
``` ### 边框样式 ```html
虚线边框
点状边框
双线边框
无边框
``` ### 分隔线（divide） 分隔线是给**相邻子元素之间**加边框，而不是给元素本身加： ```html
项目 1
项目 2
项目 3
``` `divide-y` 在每个元素之间加水平线，`divide-x` 加垂直线。很适合列表、菜单项。 ## 阴影 ### 阴影大小 ```html
极小阴影
小阴影
中阴影（常用）
大阴影（卡片常用）
超大阴影
特大阴影
内阴影
无阴影
``` > [!tip] 技巧 > 卡片用 `shadow-md` 或 `shadow-lg`，按钮用 `shadow-sm`，下拉菜单用 `shadow-xl`。内阴影 `shadow-inner` 用于凹陷效果，比如输入框。 ![](images/05-shadow.svg) ### 阴影颜色 ```html ``` 彩色阴影能让按钮看起来更有整体感，但不要过度使用。 ## 环（Ring） Ring 是一种特殊的"边框"，用阴影实现，不占用元素尺寸： ```html ``` Ring 的常见搭配： | 类名 | 效果 | |------|------| | `ring-2` | 2px 宽的环 | | `ring-blue-500` | 蓝色环 | | `ring-offset-2` | 环距离元素 2px | | `focus:ring-2` | 聚焦时才显示 | ## 轮廓（Outline） Outline 和 border 类似，但不占布局空间，常用在焦点样式上： ```html ``` > [!warning] 注意 > v4 中 `outline-none` 的作用变了。如果想去掉默认的 focus outline，用 `outline-hidden`。而 `outline` 默认宽度为 1px。 ## 实战：给产品页增加质感 把之前的产品页卡片加上边框和阴影： ```html 星光科技 · 智能灯

智能台灯 Lumina

光线随你而变。一盏懂你的台灯。

为什么选择 Lumina

🧠

AI 调光

内置传感器实时感知环境光线，自动调整亮度和色温。

👁️

护眼模式

无频闪、低蓝光，通过德国莱茵 TÜV 护眼认证。

🎤

语音控制

支持 Siri、小爱同学、Google Assistant 语音指令。

用户评价

用户

设计师小王

"用了两周，眼睛舒服多了。AI 调光真的很智能。"

用户

程序员大刘

"晚上写代码的时候，灯光会自动变暖，不刺眼。"

用户

学生小林

"期末复习全靠它了，灯光可以跟着时间变化。"

``` 这次的变化： - 特性卡片加了 `bg-white rounded-2xl border border-gray-100 shadow-md`，从纯灰块变成了带阴影的白色卡片 - 按钮加了 `shadow-lg shadow-blue-600/30`（蓝色阴影），并在 hover 时加深 - 用户评价区用了 `divide-y divide-gray-100`，在评价之间自动生成分隔线 - 头像用 `rounded-full` 变成圆形 > [!summary] 本章小结 > - 圆角用 `rounded-*`，`rounded-lg` 做卡片，`rounded-full` 做头像 > - 边框用 `border-*`，`border-gray-200` 是最常用的中性边框色 > - 分隔线 `divide-y` 给相邻元素之间加线 > - 阴影 `shadow-md` 到 `shadow-xl` 提升元素的层级感 > - 环 `ring` 用于焦点样式，不占布局空间 > - `hover:shadow-lg` 实现悬停时阴影加深的交互反馈 --- 卡片有了立体感，但页面色彩还不够丰富。下一篇给页面加上**渐变背景和滤镜效果**。 --- > 作者: Aphros > URL: https://blog.papergate.top/posts/05.%E8%BE%B9%E6%A1%86%E9%98%B4%E5%BD%B1%E7%94%BB%E9%BE%99%E7%82%B9%E7%9D%9B%E7%9A%84%E7%BB%86%E8%8A%82/