边框
控制元素轮廓样式的实用工具。
| Class | Styles |
|---|---|
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 等实用工具来设置元素的轮廓样式：
轮廓实线
轮廓虚线
轮廓点线
轮廓双线
<button class="outline-2 outline-offset-2 outline-solid ...">按钮 A</button><button class="outline-2 outline-offset-2 outline-dashed ...">按钮 B</button><button class="outline-2 outline-offset-2 outline-dotted ...">按钮 C</button><button class="outline-3 outline-offset-2 outline-double ...">按钮 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="留下评论..." /> <button class="..." type="button">发布</button></div>强烈建议在使用此实用工具时应用自己的聚焦样式以确保无障碍访问。
Prefix an outline-style utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="outline md:outline-dashed ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.