边框
用于控制元素边框宽度的实用工具。
类 | 样式 |
---|---|
border | border-width: 1px; |
border-<数字> | border-width: <数字>px; |
border-(length:<自定义属性>) | border-width: var(<自定义属性>); |
border-[<值>] | border-width: <值>; |
border-x | border-inline-width: 1px; |
border-x-<数字> | border-inline-width: <数字>px; |
border-x-(length:<自定义属性>) | border-inline-width: var(<自定义属性>); |
border-x-[<值>] | border-inline-width: <值>; |
border-y | border-block-width: 1px; |
border-y-<数字> | border-block-width: <数字>px; |
border-y-(length:<自定义属性>) | border-block-width: var(<自定义属性>); |
border-y-[<值>] | border-block-width: <值>; |
border-s | border-inline-start-width: 1px; |
border-s-<数字> | border-inline-start-width: <数字>px; |
border-s-(length:<自定义属性>) | border-inline-start-width: var(<自定义属性>); |
border-s-[<值>] | border-inline-start-width: <值>; |
border-e | border-inline-end-width: 1px; |
border-e-<数字> | border-inline-end-width: <数字>px; |
border-e-(length:<自定义属性>) | border-inline-end-width: var(<自定义属性>); |
border-e-[<值>] | border-inline-end-width: <值>; |
border-t | border-top-width: 1px; |
border-t-<数字> | border-top-width: <数字>px; |
border-t-(length:<自定义属性>) | border-top-width: var(<自定义属性>); |
border-t-[<值>] | border-top-width: <值>; |
border-r | border-right-width: 1px; |
border-r-<数字> | border-right-width: <数字>px; |
border-r-(length:<自定义属性>) | border-right-width: var(<自定义属性>); |
border-r-[<值>] | border-right-width: <值>; |
border-b | border-bottom-width: 1px; |
border-b-<数字> | border-bottom-width: <数字>px; |
border-b-(length:<自定义属性>) | border-bottom-width: var(<自定义属性>); |
border-b-[<值>] | border-bottom-width: <值>; |
border-l | border-left-width: 1px; |
border-l-<数字> | border-left-width: <数字>px; |
border-l-(length:<自定义属性>) | border-left-width: var(<自定义属性>); |
border-l-[<值>] | border-left-width: <值>; |
divide-x | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: 1px; } |
divide-x-<数字> | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <数字>px; } |
divide-x-(length:<自定义属性>) | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: var(<自定义属性>); } |
divide-x-[<值>] | & > :not(:last-child) { border-inline-start-width: 0px; border-inline-end-width: <值>; } |
divide-y | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: 1px; } |
divide-y-<数字> | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <数字>px; } |
divide-y-(length:<自定义属性>) | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: var(<自定义属性>); } |
divide-y-[<值>] | & > :not(:last-child) { border-top-width: 0px; border-bottom-width: <值>; } |
divide-x-reverse | --tw-divide-x-reverse: 1; |
divide-y-reverse | --tw-divide-y-reverse: 1; |
使用 border
和 border-<数字>
实用工具(如 border-2
和 border-4
)来设置元素所有边的边框宽度。
使用 border-r
和 border-t-4
等实用工具来设置元素一边的边框宽度。
使用 border-x
和 border-y-4
等实用工具来同时设置元素两条边的边框宽度。
使用 border-s
和 border-e-4
等实用工具来设置 border-inline-start-width
和 border-inline-end-width
逻辑属性,它们根据文本方向映射到左边框或右边框。
使用 divide-x
和 divide-y-4
等实用工具在子元素之间添加边框。
如果您的元素是反向排序的(例如使用 flex-row-reverse
或 flex-col-reverse
),请使用 divide-x-reverse
或 divide-y-reverse
实用工具,以确保将边框添加到每个元素的正确一侧。
使用 border-[<值>]
语法 来设置边框宽度基于完全自定义的值
<div class="border-[2vw] ..."> <!-- ... --></div>
对于 CSS 变量,您还可以使用 border-(length:<自定义属性>)
语法
<div class="border-(length:--my-border-width) ..."> <!-- ... --></div>
这只是 border-[lengthvar(<自定义属性>)]
的简写,它会自动为您添加 var()
函数。
为一个 border-width
工具类 添加一个断点变体,例如 md:
,以仅在中等中等 屏幕尺寸及以上应用该工具类。
<div class="border-2 md:border-t-4 ..."> <!-- ... --></div>
了解更多关于在变体文档中使用变体的信息。