1. 边框
  2. outline-style

边框

outline-style

用于控制元素轮廓样式的工具。

样式
outline-solid
outline-style: solid;
outline-dashed
outline-style: dashed;
outline-dotted
outline-style: dotted;
outline-double
outline-style: double;
outline-none
outline-style: none;
outline-hidden
outline: 2px solid transparent; outline-offset: 2px;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 outline-solidoutline-dashed 等工具设置元素轮廓的样式:

¥Use utilities like outline-solid and outline-dashed to set the style of an element's outline:

outline-solid

outline-dashed

outline-dotted

outline-double

<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button>
<button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button>
<button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button>
<button class="outline-3 outline-offset-2 outline-double ...">Button D</button>

隐藏轮廓(Hiding an outline)

¥Hiding an outline

使用 outline-hidden 工具隐藏聚焦元素上的默认浏览器轮廓,同时仍在强制颜色模式下保留轮廓:

¥Use the outline-hidden utility to hide the default browser outline on focused elements, while still preserving the outline in forced colors mode:

尝试在你的开发者工具中模拟 `forced-colors: active` 以查看行为

<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />

强烈建议在使用此工具时应用你自己的聚焦样式以实现可访问性。

¥It is highly recommended to apply your own focus styling for accessibility when using this utility.

删除轮廓(Removing outlines)

¥Removing outlines

使用 outline-none 工具完全删除聚焦元素上的默认浏览器轮廓:

¥Use the outline-none utility to completely remove the default browser outline on focused elements:

<div class="focus-within:outline-2 focus-within:outline-indigo-600 ...">
<textarea class="outline-none ..." placeholder="Leave a comment..." />
<button class="..." type="button">Post</button>
</div>

强烈建议在使用此工具时应用你自己的聚焦样式以实现可访问性。

¥It is highly recommended to apply your own focus styling for accessibility when using this utility.

响应式设计(Responsive design)

¥Responsive design

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

<div class="outline md:outline-dashed ...">
<!-- ... -->
</div>

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

TailwindCSS v4.0 中文网 - 粤ICP备13048890号