边框
outline-width
用于控制元素轮廓宽度的工具。
类 | 样式 |
---|---|
outline | outline-width: 1px; |
outline-<number> | outline-width: <number>px; |
outline-(length:<custom-property>) | outline-width: var(<custom-property>); |
outline-[<value>] | outline-width: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 outline
或 outline-<number>
工具(如 outline-2
和 outline-4
)设置元素轮廓的宽度:
¥Use outline
or outline-<number>
utilities like outline-2
and outline-4
to set the width of an element's outline:
outline
outline-2
outline-4
<button class="outline outline-offset-2 ...">Button A</button><button class="outline-2 outline-offset-2 ...">Button B</button><button class="outline-4 outline-offset-2 ...">Button C</button>
聚焦时应用(Applying on focus)
¥Applying on focus
在 outline-width
工具前面加上一个变体,例如 focus:*
,以便仅在该状态下应用该工具:
聚焦按钮以查看添加的轮廓
<button class="outline-offset-2 outline-sky-500 focus:outline-2 ...">Save Changes</button>
请参阅 变体文档 详细了解如何使用变体。
使用自定义值(Using a custom value)
¥Using a custom value
使用 outline-[<value>]
语法 根据完全自定义的值设置 outline width:
<div class="outline-[2vw] ..."> <!-- ... --></div>
对于 CSS 变量,还可以使用 outline-(length:<custom-property>)
语法:
<div class="outline-(length:--my-outline-width) ..."> <!-- ... --></div>
这只是简写,用于 outline-[length:var(<custom-property>)]
它会自动为你添加 var()
函数。
响应式设计(Responsive design)
¥Responsive design
在 outline-width
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="outline md:outline-2 ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。