アウトラインオフセット

例

基本的な例

要素のアウトラインのオフセットを変更するには、outline-offset-2 や outline-offset-4 のようなユーティリティを使用します。

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

カスタム値の使用

次の アウトラインオフセット-[<value>] 構文 を使用して、アウトラインオフセットを完全にカスタムの値に基づいて設定します。

<div class="outline-offset-[2vw] ...">
  <!-- ... -->
</div>

CSS 変数の場合は、次のものも使用できます。 アウトラインオフセット-(<custom-property>) 構文

<div class="outline-offset-(--my-outline-offset) ...">
  <!-- ... -->
</div>

これは、 アウトラインオフセット-[var(<custom-property>)] を自動的に追加する var() 関数の省略形です。

レスポンシブデザイン

プレフィックスan outline-offset ユーティリティ を md: のようなブレークポイントバリアントでプレフィックスすると、ユーティリティをmedium 画面サイズ以上でのみ適用できます。

<div class="outline md:outline-offset-2 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。