Lzh on GitHub

background-clip

用于控制元素背景边界框的工具。

快速参考

类别样式
bg-clip-borderbackground-clip: border-box;
bg-clip-paddingbackground-clip: padding-box;
bg-clip-contentbackground-clip: content-box;
bg-clip-textbackground-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>

响应式设计

在 background-clip 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

<div class="bg-clip-border md:bg-clip-padding ...">
  <!-- ... -->
</div>

在 变体文档 中了解更多关于使用变体的信息。