背景
background-clip
控制元素背景邊界框的實用工具。
| 類別 | 樣式 |
|---|---|
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 實用工具來裁剪元素的背景，使其符合文字的形狀
哈囉 世界
<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: 這樣的斷點變體，僅在以下情況套用該實用工具中型 螢幕尺寸及以上
<div class="bg-clip-border md:bg-clip-padding ..."> <!-- ... --></div>了解更多關於在變體文件中使用變體的資訊。
