TailwindCSS教程

边框样式 Border

Tailwind CSS 提供了全面的边框控制能力，从宽度、颜色到样式和圆角，以及特殊的轮廓和环形效果。本页面将展示这些边框相关属性的用法和最佳实践。

边框圆角 Border Radius

基础圆角样式

rounded-none
无圆角
rounded-sm
小圆角 (0.125rem)
rounded
默认圆角 (0.25rem)
rounded-md
中等圆角 (0.375rem)
rounded-lg
大圆角 (0.5rem)
rounded-xl
超大圆角 (0.75rem)
rounded-2xl
2XL圆角 (1rem)
rounded-3xl
3XL圆角 (1.5rem)
rounded-full
完全圆形

指定边圆角

rounded-t-lg
顶部圆角
rounded-r-lg
右侧圆角
rounded-b-lg
底部圆角
rounded-l-lg
左侧圆角
rounded-tl-lg
左上圆角
rounded-tr-lg
右上圆角
rounded-br-lg
右下圆角
rounded-bl-lg
左下圆角

响应式圆角

rounded-lg
响应式圆角
rounded-full
移动端圆形，桌面端圆角
rounded-none
桌面端才有顶部圆角

实际应用示例

按钮样式

卡片设计

标准卡片

rounded-lg

媒体卡片

带图像的卡片

输入框样式

头像和徽章

rounded-full
3
带徽章的头像

圆角设计提示

  • 保持一致性 - 在整个界面中使用相同的圆角半径，创建统一的视觉语言
  • 为不同元素类型选择适当的圆角 - 按钮适合使用中等圆角，卡片可以使用较大圆角
  • 考虑元素大小 - 较小的元素通常适合较小的圆角，较大的元素适合较大的圆角
  • 使用圆角传达意义 - 完全圆形(rounded-full)通常用于头像、徽章等元素
  • 通过不对称圆角创建独特的视觉效果 - 仅在特定角使用圆角可以创建有趣的设计

边框宽度 Border Width

基础边框宽度

border-0

无边框 (border-0)

border

默认边框 (border, 1px)

border-2

2px边框 (border-2)

border-4

4px边框 (border-4)

border-8

8px边框 (border-8)

方向性边框

border-t-2

上边框 (border-t-2)

border-r-2

右边框 (border-r-2)

border-b-2

下边框 (border-b-2)

border-l-2

左边框 (border-l-2)

border-x-2

水平边框 (border-x-2)

border-y-2

垂直边框 (border-y-2)

组合边框宽度

border-t-4 border-r-2 border-b border-l-0

混合宽度边框

border-x-4 border-y

水平粗/垂直细

border-t-8 border-b-2

上粗/下细

响应式边框

调整浏览器窗口大小查看效果。边框宽度会随着屏幕断点改变。

border sm:border-2 md:border-4 lg:border-8

随屏幕尺寸变化 (移动1px → 桌面8px)

border-0 sm:border-b-2 md:border

在小屏隐藏，中屏显示底边框，大屏显示全边框

实际应用

卡片强调

重要卡片

使用较粗边框强调重要内容

分隔线

上方内容

下方内容

输入框焦点状态

进度指示器

1
2
3

边框宽度技巧

  • • 边框宽度会增加元素的尺寸，记得考虑到box-sizing设置
  • • 细边框(1px)适合精致、现代的界面设计
  • • 粗边框(4-8px)可用于强调、吸引注意或艺术化设计
  • • 方向性边框常用于创建分隔线、标签或指示器
  • • 响应式边框宽度可以根据屏幕大小调整视觉层次感

边框颜色 Border Color

基础边框颜色

灰色

border-gray-300

红色

border-red-500

蓝色

border-blue-500

绿色

border-green-500

黄色

border-yellow-500

紫色

border-purple-500

粉色

border-pink-500

靛蓝

border-indigo-500

颜色深浅变化

Tailwind 为每种颜色提供了从 50 到 900 的深浅变化，以下是蓝色的示例：

很浅

border-blue-100

浅色

border-blue-300

中等

border-blue-500

深色

border-blue-700

很深

border-blue-900

方向性边框颜色

四边不同颜色

border-t-red-500 border-r-blue-500 border-b-green-500 border-l-yellow-500

水平/垂直不同颜色

border-x-purple-500 border-y-pink-500

底部边框颜色

border-b-indigo-500

交互状态颜色

不同状态下的边框颜色：

默认
悬停
聚焦
禁用
错误
成功
警告

实时交互示例：

实际应用场景

信息提示卡片

这是一个信息提示

左侧蓝色边框表示普通信息

这是一个警告提示

左侧黄色边框表示警告信息

这是一个错误提示

左侧红色边框表示错误信息

分类与标签

设计开发产品营销其他
项目报告

顶部边框颜色用来区分文档类型或重要程度。

边框颜色技巧

  • • 在浅色背景上使用中等深浅度的边框颜色以保持适当对比度
  • • 使用边框颜色强调状态变化，如错误（红色）、成功（绿色）等
  • • 在表单元素上，聚焦状态使用更鲜明的颜色（如品牌主色）
  • • 对于信息分类，使用一致的颜色体系以建立视觉关联
  • • 避免使用过多不同颜色的边框，以保持界面的视觉和谐
  • • 考虑使用半透明边框（如 border-blue-500/50）创建柔和效果

边框样式 Border Style

边框样式

Tailwind CSS 提供了几种边框样式类，可以控制边框的线条样式，如实线、虚线、点线等。

基础边框样式

border-solid

实线边框（默认）

常用于大多数标准边框

border-dashed

虚线边框

表示可拖放区域、临时状态

border-dotted

点线边框

用于标记可点击或互动元素

border-double

双线边框

用于强调或装饰效果

border-none

无边框

移除已有边框

结合方向与颜色

边框样式类可以与方向类和颜色类结合使用，创建更多样化的边框效果。

顶部虚线
border-t-2 border-dashed border-gray-400
底部点线
border-b-2 border-dotted border-gray-400
左右双线
border-x-2 border-double border-gray-400

实际应用示例

拖放区域设计

将文件拖到此处

或点击上传

border-dashed 用于拖放区域，暗示用户可以将内容拖入该区域

装饰性边框

特别优惠

限时折扣5折

使用优惠码: TAILWIND

border-double 和 border-dotted 用于装饰性内容，突出显示优惠信息

互动元素

悬停在按钮上可以看到边框颜色变化效果。不同的边框样式可以为交互元素提供独特的视觉效果。

多样式组合

上边虚线分隔的内容

点线边框突出显示的内容

左侧内容

右侧内容

实线边框引用内容，通常用于引述或突出重要文本

边框样式使用技巧

  • 实线边框 (border-solid) 是最常用的样式，适合大多数场景
  • 虚线边框 (border-dashed) 常用于表示临时状态、可编辑区域或拖放区域
  • 点线边框 (border-dotted) 适合用于次要分隔或提示可交互内容
  • 双线边框 (border-double) 可用于特殊强调，如证书、邀请函等
  • 结合:hover、:focus状态改变边框样式，提供直观的用户反馈

分隔线 Divider

基础分隔线

基础上边框分隔线

border-t

基础下边框分隔线

border-b

使用高度和背景色

h-px bg-gray-200

稍粗的分隔线

h-0.5 bg-gray-200

粗分隔线

h-1 bg-gray-200

样式变化

虚线分隔线

border-t border-dashed

点线分隔线

border-t border-dotted

粗实线分隔线

border-t-2

更粗实线分隔线

border-t-4

彩色分隔线

border-t border-red-300

渐变色分隔线

h-0.5 bg-gradient-to-r from-blue-300 to-purple-300

带文字的分隔线

分隔文字

居中文字分隔线

使用flex布局和border-t实现
左侧文字

左侧文字分隔线

右侧文字

右侧文字分隔线

章节标题

带装饰的分隔线

垂直分隔线

项目1
项目2
项目3
项目4
项目5

导航或工具栏中的垂直分隔线

1
步骤一
2
步骤二
3
步骤三

步骤指示器中的分隔线

实际应用场景

资料卡片

带分隔线的卡片示例

姓名张三
电话138****1234
邮箱example@mail.com

活动时间线

系统更新2023年10月15日

系统完成版本更新，新增功能上线

任务完成2023年10月10日

项目第一阶段任务全部完成

开始测试2023年10月5日

开始内部测试流程

响应式分隔线

在小屏幕上是水平分隔线，大屏幕上是垂直分隔线

根据屏幕尺寸改变方向

border-t md:border-l md:border-t-0 md:h-16

根据屏幕尺寸改变粗细

hidden md:block border-t-2 & block md:hidden border-t

分隔线使用技巧

  • • 使用border-t或border-b创建简单的水平分隔线
  • • 使用border-l或border-r创建垂直分隔线，需要设置高度
  • • 分隔线颜色应与设计系统保持一致，通常使用低对比度的颜色
  • • 在白色背景上，浅灰色(gray-200, gray-100)的分隔线看起来最自然
  • • 使用不同的border样式(dashed, dotted)创造视觉变化
  • • 带文字分隔线可以使用flex布局轻松实现
  • • 响应式设计中，可能需要在不同屏幕尺寸调整分隔线的方向或样式

轮廓 Outline

轮廓线(Outline)

Tailwind CSS 提供了控制元素轮廓线的类，可以设置轮廓线的宽度、样式、颜色和偏移量。轮廓线与边框的区别在于它不占用空间，常用于焦点状态。

轮廓宽度

outline-0

无轮廓线

outline-1

1px 宽轮廓线

outline-2

2px 宽轮廓线

outline-4

4px 宽轮廓线

outline-8

8px 宽轮廓线

轮廓样式

outline-none

移除轮廓线

outline

默认轮廓线样式

outline-dashed

虚线轮廓

outline-dotted

点线轮廓

outline-double

双线轮廓

轮廓偏移

outline-offset-0

无偏移距离

outline-offset-1

1px 偏移距离

outline-offset-2

2px 偏移距离

outline-offset-4

4px 偏移距离

outline-offset-8

8px 偏移距离

轮廓颜色

outline-blue-500

使用 outline-blue-500 类

outline-red-500

使用 outline-red-500 类

outline-green-500

使用 outline-green-500 类

outline-purple-500

使用 outline-purple-500 类

Focus 状态应用

轮廓线最常见的应用场景是为表单元素和交互元素设置焦点状态样式。

默认与自定义轮廓对比

使用浏览器默认的focus轮廓样式

focus:outline focus:outline-2 focus:outline-blue-500 focus:outline-offset-2

不同样式的焦点轮廓

实际应用示例

图片选择器

Cat
Dog
Bird

使用outline来标识选中的图片，hover时显示outline-2，选中状态显示outline-2并添加半透明覆盖层

卡片选择器

使用outline来标识选中的卡片，结合peer-checked选择器控制选中状态

轮廓线使用技巧

  • 轮廓线不占用空间，不会影响布局，适合用于交互状态（如焦点、选中）
  • 使用 outline-offset 类可以控制轮廓与元素边缘的距离
  • 结合 :focus 和 :focus-visible 伪类，可以创建更易访问的表单元素
  • 考虑使用 outline-none 移除默认轮廓，但务必提供其他视觉提示代替（为保证可访问性）
  • 在阴影和轮廓之间选择时，轮廓更适合表示交互状态，阴影更适合表示层次关系
  • 使用较大的轮廓偏移配合较细的轮廓线，可以创建轻量优雅的选中效果

环形 Ring

基础环形样式

Ring
无环形边框
Ring
1px环形边框
Ring
2px环形边框
Ring
4px环形边框
Ring
8px环形边框

环形颜色

Ring
蓝色环形
Ring
红色环形
Ring
绿色环形
Ring
黄色环形
Ring
紫色环形

环形偏移

Ring
无偏移
Ring
1px偏移
Ring
2px偏移
Ring
4px偏移
Ring
8px偏移

偏移颜色

Ring
默认偏移色
Ring
浅蓝偏移
Ring
浅红偏移
Ring
浅绿偏移
Ring
浅黄偏移

环形透明度

Ring
默认不透明度
Ring
90%不透明度
Ring
75%不透明度
Ring
50%不透明度
Ring
25%不透明度

实际应用示例

表单输入焦点

按钮悬停效果

选中项目

当前选中项目

未选中项目

Ring vs Border对比

Ring创建的是围绕元素的额外边框，不会影响布局；而Border是元素本身的边缘，会影响元素的尺寸计算。

Border
border-2
Ring
ring-2
Ring+Offset
ring-2 + offset

设计提示

  • • 在设计系统中保持边框样式的一致性，为不同的边框宽度、圆角和颜色建立明确的使用规则
  • • 边框颜色通常应该是低对比度的，比背景色稍深一些，避免过于鲜艳的边框色调
  • • 圆角的使用应当与产品整体设计语言保持一致，不要在同一界面混用完全不同的圆角风格
  • • 环形(ring)效果非常适合表示焦点状态，使用不同于边框的颜色可以增强可辨识性
  • • 轮廓(outline)对于无障碍设计很重要，尤其是对键盘用户而言，请勿移除焦点轮廓
  • • 考虑在高密度信息区域使用分隔线而非完整边框，以减少视觉干扰
  • • 对于边框宽度，遵循渐进式增长的原则：0.5px → 1px → 2px → 4px