背景
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>在变体文档中了解有关使用变体的更多信息。
