環形偏移寬度

​基本用法

​設定環形偏移寬度

使用 ring-offset-{width} 工具程式透過增加實心白色方框陰影和增加附帶輪廓環的厚度來模擬偏移，以容納偏移。

<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 中實際偏移方框陰影，因此我們必須使用與父背景顏色相符的實心顏色陰影來偽造它。我們預設使用白色，但是如果您要在不同的背景顏色上增加環形偏移，則應使用 ring-offset-{color} 工具程式來與父背景顏色相符

<button class="ring ring-pink-500 ring-offset-2 ring-offset-slate-50 dark:ring-offset-slate-900 ...">
  Save Changes
</button>

如需更多資訊，請參閱ring offset color文件。

​條件式套用

​游標移入、焦點和其他狀態

Tailwind 讓您使用變異修飾詞在不同狀態下條件式套用實用程式類別。例如，使用 hover:ring-offset-4 僅在hover時套用 ring-offset-4 實用程式。

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

如需所有可用狀態修飾詞的完整清單，請查看 Hover、Focus 和其他狀態 文件。

​斷點和媒體查詢

您也可以使用變體修改器來設定媒體查詢目標，例如回應式斷點、暗色模式、偏好減少動畫等。例如，使用 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>

在 任意值 文件中，深入了解任意值支援。