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-solid 和 outline-dashed 等工具类设置元素轮廓的样式：

outline-solid

outline-dashed

outline-dotted

outline-double

<!-- [!code classes: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 工具类隐藏聚焦元素上的浏览器默认轮廓，同时在强制颜色模式下仍保留轮廓：

<!-- [!code classes:focus:outline-hidden] -->
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />

使用此工具类时，强烈建议自行添加焦点样式，以确保可访问性。

移除轮廓

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

<!-- [!code classes: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>

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