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;

示例

基本示例

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

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>

隐藏轮廓

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

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

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

强烈建议在使用此实用工具时,为可访问性应用您自己的焦点样式。

移除轮廓

使用 outline-none 实用工具完全移除焦点元素上的默认浏览器轮廓

<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>

强烈建议在使用此实用工具时,为可访问性应用您自己的焦点样式。

响应式设计

前缀一个 outline-style 实用工具 使用像 md: 这样的断点变体,仅在以下情况下应用实用工具中等 屏幕尺寸及以上

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

变体文档中了解有关使用变体的更多信息。

版权所有 © 2025 Tailwind Labs Inc.·商标政策