背景
用于控制元素背景边界框的实用工具。
| 类名 | 样式 |
|---|---|
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>了解更多关于在 变体文档 中使用变体的信息。