背景
要素の背景のバウンディングボックスを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
bg-clip-border | background-clip: border-box; |
bg-clip-padding | background-clip: padding-box; |
bg-clip-content | background-clip: content-box; |
bg-clip-text | background-clip: text; |
要素の背景のバウンディングボックスを制御するには、bg-clip-border、bg-clip-padding、および bg-clip-content ユーティリティを使用します
bg-clip-border
bg-clip-padding
bg-clip-content
<div class="border-4 bg-indigo-500 bg-clip-border p-3"></div><div class="border-4 bg-indigo-500 bg-clip-padding p-3"></div><div class="border-4 bg-indigo-500 bg-clip-content p-3"></div>テキストの形状に合わせて要素の背景をクリップするには、bg-clip-text ユーティリティを使用します
Hello world
<p class="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ..."> Hello world</p>プレフィックスa background-clip ユーティリティ md: のようなブレークポイントバリアントを使用して、ユーティリティを適用するのはmedium 画面サイズ以上
<div class="bg-clip-border md:bg-clip-padding ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。