边框
用于模拟添加轮廓环时偏移的实用程序。
使用 ring-offset-{width}
实用程序通过添加纯白色盒阴影并增加伴随轮廓环的厚度来模拟偏移,以适应偏移。
ring-offset-0
ring-offset-2
ring-offset-4
<button class="... ring ring-pink-500 ring-offset-0">Button A</button>
<button class="... ring ring-pink-500 ring-offset-2">Button B</button>
<button class="... ring ring-pink-500 ring-offset-4">Button C</button>
你实际上无法在 CSS 中偏移一个 box-shadow,所以我们必须使用与父级背景色匹配的纯色阴影来模拟它。默认情况下我们使用白色,但如果你在不同的背景色上添加环形偏移,你应该使用 ring-offset-{color}
实用程序来匹配父级背景色
ring-offset-slate-50 dark:ring-offset-slate-900
<button class="ring ring-pink-500 ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-900 ...">
Save Changes
</button>
有关更多信息,请参阅 环形偏移颜色 文档。
Tailwind 允许你使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:ring-offset-4
仅在悬停时应用 ring-offset-4
实用程序。
<button class="ring-2 ring-offset-2 hover:ring-offset-4">
<!-- ... -->
</button>
有关所有可用状态修饰符的完整列表,请查看 悬停、焦点和其它状态 文档。
您还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、 prefers-reduced-motion 等等。例如,使用 md:ring-offset-4
仅在中等屏幕尺寸及以上应用 ring-offset-4
实用程序。
<button class="ring-2 ring-offset-2 md:ring-offset-4">
<!-- ... -->
</button>
要了解更多信息,请查看有关 响应式设计、暗黑模式 和 其他媒体查询修饰符 的文档。
要自定义生成哪些环偏移宽度实用程序,请在 tailwind.config.js
文件的 theme
部分的 ringOffsetWidth
键下添加您的自定义值。
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
ringOffsetWidth: {
'3': '3px',
'6': '6px',
'10': '10px',
}
}
}
}
了解有关在 主题自定义 文档中自定义默认主题的更多信息。
如果您需要使用一次性的 ring-offset
值,而该值不适合包含在您的主题中,请使用方括号使用任意值动态生成属性。
<div class="ring-offset-[3px]">
<!-- ... -->
</div>
详细了解 任意值 文档中对任意值的 支持。