边框
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-solid
和 outline-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>
请参阅 变体文档 详细了解如何使用变体。