border-width

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 border 或 border-<number> 工具（如 border-2 和 border-4）设置元素所有边的边框宽度：

¥Use border or border-<number> utilities like border-2 and border-4 to set the border width for all sides of an element:

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div>

个别面(Individual sides)

¥Individual sides

使用 border-r 和 border-t-4 等工具设置元素一侧的边框宽度：

¥Use utilities like border-r and border-t-4 to set the border width for one side of an element:

<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

水平端和垂直端(Horizontal and vertical sides)

¥Horizontal and vertical sides

使用 border-x 和 border-y-4 等工具同时设置元素两侧的边框宽度：

¥Use utilities like border-x and border-y-4 to set the border width on two sides of an element at the same time:

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

使用逻辑属性(Using logical properties)

¥Using logical properties

使用像 border-s 和 border-e-4 这样的工具来设置 border-inline-start-width 和 border-inline-end-width 逻辑属性，它们根据文本方向映射到左或右边框：

¥Use utilities like border-s and border-e-4 to set the border-inline-start-width and border-inline-end-width logical properties, which map to either the left or right border based on the text direction:

<div dir="ltr">
<div class="border-s-4 ..."></div>
</div>
<div dir="rtl">
<div class="border-s-4 ..."></div>
</div>

子元素之间(Between children)

¥Between children

使用 divide-x 和 divide-y-4 等工具在子元素之间添加边框：

¥Use utilities like divide-x and divide-y-4 to add borders between child elements:

<div class="grid grid-cols-3 divide-x-4">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

反转子顺序(Reversing children order)

¥Reversing children order

如果你的元素是反向顺序（使用 flex-row-reverse 或 flex-col-reverse），请使用 divide-x-reverse 或 divide-y-reverse 工具确保将边框添加到每个元素的正确一侧：

¥If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the divide-x-reverse or divide-y-reverse utilities to ensure the border is added to the correct side of each element:

<div class="flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200">
<div>01</div>
<div>02</div>
<div>03</div>
</div>

使用自定义值(Using a custom value)

¥Using a custom value

使用 border-[<value>] 语法 根据完全自定义的值设置 border width：

<div class="border-[2vw] ...">
  <!-- ... -->
</div>

对于 CSS 变量，还可以使用 border-(length:<custom-property>) 语法：

<div class="border-(length:--my-border-width) ...">
  <!-- ... -->
</div>

这只是简写，用于 border-[length:var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

在 border-width 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<div class="border-2 md:border-t-4 ...">
  <!-- ... -->
</div>

请参阅 变体文档 详细了解如何使用变体。