Tailwind CSS 边框完整参考

Tailwind CSS 提供了一系列用于设置边框的 CSS 类，这些类能够快速、灵活地创建各种不同形状、线条风格和边框颜色的元素边框。本文将完整介绍 Tailwind CSS 中所有用于设置元素边框的 CSS 类。

边框颜色

border-{color}

用于定义元素边框的颜色。可以填写 Tailwind CSS 预定义的颜色名称，例如 border-red-500 表示元素边框颜色为红色。

<div class="border border-red-500"></div>

border-transparent

指定边框的颜色为透明。

<div class="border border-transparent"></div>

边框宽度

border-{width}

用于定义元素边框的宽度，其中 {width} 可以是 0、2、4、6、8 或 10 层级的宽度。

<div class="border border-2"></div>

边框样式

border-{style}

用于设置元素边框的样式，可以选用以下一种样式：

• solid：实线边框
• dashed：虚线边框
• dotted：点状边框
• double：双线边框
• none：无边框

<div class="border border-solid"></div>
<div class="border border-dashed"></div>
<div class="border border-dotted"></div>
<div class="border border-double"></div>
<div class="border border-none"></div>

border-{top/bottom/left/right}-{style}

用于分别设置元素上、下、左右四个方向的边框样式。

<div class="border-t border-solid"></div>
<div class="border-b border-dashed"></div>
<div class="border-l border-dotted"></div>
<div class="border-r border-double"></div>

边框圆角

rounded

用于设置元素圆角为 0.25rem。

<div class="border border-solid rounded"></div>

rounded-{size}

用于设置元素圆角的大小，其中 {size} 可以是 none、sm、md、lg、xl 或 full。

<div class="border border-solid rounded-lg"></div>

rounded-{direction}

用于分别设置元素上、下、左右四个方向的圆角大小，其中 {direction} 可以是 t、b、l、r。

<div class="border-t border-solid rounded-full"></div>
<div class="border-b border-solid rounded-none"></div>
<div class="border-l border-solid rounded-md"></div>
<div class="border-r border-solid rounded-xl"></div>

rounded-{direction}-{size}

用于分别设置元素上、下、左右四个方向的圆角大小和具体尺寸。

<div class="border-t border-solid rounded-t-md"></div>
<div class="border-b border-solid rounded-b-none"></div>
<div class="border-l border-solid rounded-l-xl"></div>
<div class="border-r border-solid rounded-r-full"></div>

边框宽度偏移

border-{size}-0

用于保持边框大小不变的情况下将边框向元素内部偏移 0.5rem。

<div class="border border-solid border-4 border-red-500 border-t-0"></div>

border-l-{size}-0

用于保持左侧边框大小不变的情况下将左侧边框向元素内部偏移 0.5rem。

<div class="border-l border-solid border-8 border-red-500 border-l-0"></div>

border-r-{size}-0

用于保持右侧边框大小不变的情况下将右侧边框向元素内部偏移 0.5rem。

<div class="border-r border-solid border-6 border-red-500 border-r-0"></div>

border-t-{size}-0

用于保持上侧边框大小不变的情况下将上侧边框向元素内部偏移 0.5rem。

<div class="border-t border-solid border-2 border-red-500 border-t-0"></div>

border-b-{size}-0

用于保持下侧边框大小不变的情况下将下侧边框向元素内部偏移 0.5rem。

<div class="border-b border-solid border-10 border-red-500 border-b-0"></div>

总结

本文介绍了 Tailwind CSS 中所有用于设置元素边框的相关 CSS 类，包括设置边框颜色、边框宽度、边框样式、边框圆角以及边框宽度偏移等。使用 Tailwind CSS 进行边框样式的设计足够灵活，让开发者能够快速、自由地构建自己想要的界面样式与效果。