background-clip

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 bg-clip-border、bg-clip-padding 和 bg-clip-content 工具控制元素背景的边界框：

¥Use the bg-clip-border, bg-clip-padding, and bg-clip-content utilities to control the bounding box of an element's background:

<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>

裁剪为文本(Cropping to text)

¥Cropping to text

使用 bg-clip-text 工具裁剪元素的背景以匹配文本的形状：

¥Use the bg-clip-text utility to crop an element's background to match the shape of the 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>

响应式设计(Responsive design)

¥Responsive design

在 background-clip 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。