環寬

​基本用法

​新增一個環

使用 ring-{width} 工具程式，可將特定粗細的實心方框陰影套用至元素。預設情況下，環形為半透明藍色，類似於許多系統中的預設焦點環樣式。

<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、ringOpacity 和 ringOffsetWidth 工具程式來控制環形的顏色、不透明度和偏移。

​焦點環

透過在任何 ring-{width} 工具程式的開頭加上 focus:，環形寬度工具程式可輕鬆使用自訂焦點環。

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

預設情況下，ringColor、ringOpacity、ringOffsetWidth 和 ringOffsetColor 工具程式會啟用 focus 變異。

​內嵌環形

使用 ring-inset 工具程式，可強制環形呈現在元素的內側，而非外側。這對於位於螢幕邊緣的元素很有用，因為部分環形會不可見。

<button class="... ring-2 ring-pink-300 ring-inset">
  Save Changes
</button><button class="... ring-2 ring-pink-500 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 來自訂這些值。

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

在 主題自訂 文件中深入了解如何自訂預設主題。

​任意值

如果您需要使用一次性的 ring 值，而該值不適合納入您的主題，請使用方括號來使用任意值動態產生屬性。

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

在任意值 文件了解有關任意值支援的更多資訊。