效果
mask-origin
Utilities for controlling how an element's mask image is positioned relative to borders, padding, and content.
| 类 | 样式 |
|---|---|
mask-origin-border | mask-origin: border-box; |
mask-origin-padding | mask-origin: padding-box; |
mask-origin-content | mask-origin: content-box; |
mask-origin-fill | mask-origin: fill-box; |
mask-origin-stroke | mask-origin: stroke-box; |
mask-origin-view | mask-origin: view-box; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 mask-origin-border、mask-origin-padding 和 mask-origin-content 等工具控制元素蒙版的渲染位置：
¥Use utilities like mask-origin-border, mask-origin-padding, and mask-origin-content to control where an element's mask is rendered:
mask-origin-border
mask-origin-padding
mask-origin-content
<div class="mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ..."></div>响应式设计(Responsive design)
¥Responsive design
在 mask-origin 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="mask-origin-border md:mask-origin-padding ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。