Lzh on GitHub

outline-style

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

快速参考

类名样式
outline-solidoutline-style: solid;
outline-dashedoutline-style: dashed;
outline-dottedoutline-style: dotted;
outline-doubleoutline-style: double;
outline-noneoutline-style: none;
outline-hiddenoutline: 2px solid transparent; outline-offset: 2px;

示例

基本示例

使用 outline-solid 和 outline-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>

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