Ring Width 环宽

用于使用盒阴影创建轮廓环的实用程序。

Class	Properties

基本用法

添加一个环

使用 ring-{width} 实用程序将特定厚度的实心阴影应用于元素。 默认情况下，环是半透明的蓝色，类似于许多系统中的默认焦点环样式。

ring-2

ring

ring-4

<button class="... ring-offset-2 ring-2">Button A</button>
<button class="... ring-offset-2 ring">Button B</button>
<button class="... ring-offset-2 ring-4">Button C</button>

环形实用程序与常规 shadow-{size} 实用程序优雅地组合在一起，并可以在同一元素上组合。

您还可以使用 ringColor 和 ringOffsetWidth 工具来控制环的颜色和偏移量。

聚焦环

环宽度实用程序使得通过在任何 ring-{width} 实用程序的开头添加 focus: 来使用自定义聚焦环变得容易。

👆 聚焦这个按钮，看到戒指出现

<button class="... focus:ring-2">Save Changes</button>

focus 变体默认启用了 ringColor、ringOffsetWidth 和 ringOffsetColor 工具。

插入环

使用 ring-inset 实用程序强制环在元素的内部而不是外部渲染。这对于屏幕边缘的元素很有用，因为环的一部分可能不可见。

<button class="... ring-2 ring-pink-300 ring-inset">
  Save Changes
</button>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:ring-4 只在悬停时应用 ring-4 实用程序。

<div class="ring-2 hover:ring-4">
	<!-- ... -->
</div>

有关所有可用状态修饰符的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、偏好减少动作等媒体查询进行定位。例如，使用 md:ring-4 仅在中等屏幕尺寸及以上应用 ring-4 实用程序。

<div class="ring-2 md:ring-4">
	<!-- ... -->
</div>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。

使用自定义值

定制您的主题

默认情况下，Tailwind 包含一些通用的 ring-width 实用程序。您可以通过编辑 tailwind.config.js 文件中的 theme.ringWidth 或 theme.extend.ringWidth 来自定义这些值。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      ringWidth: {			
        '10': '10px',		
      }						
    }
  }
}

有关自定义默认主题的更多信息，请参阅主题自定义文档。

任意值

如果您需要使用一个与主题无关的 ring 值，可以使用方括号来根据任意值动态生成属性。

<p class="ring-[10px]">
	<!-- ... -->
</p>

有关任意值支持的更多信息，请参阅任意值文档。