仅 CSS 的 Tailwind CSS 遮罩，用于将图像剪切成形状 - 圆形、方圆形、心形、六边形等。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
遮罩组件将几何或自定义形状应用于图像和元素，创造视觉兴趣和独特的设计。蒙版采用 CSS 蒙版属性构建，可实现创意图像框架和装饰样式。 Frutjam 面具系统支持多种形状——非常适合头像框架、画廊演示和艺术布局。
仅 CSS，无需 JavaScript。 WCAG AA 可访问且与框架无关 - 可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
| 班级 | 类型 | 描述 |
|---|---|---|
| mask | 根据 | 将元素剪辑为 CSS 蒙版形状 |
| mask-circle | 风格 | 圆形口罩 |
| mask-squircle | 风格 | Squircle（圆角方形）蒙版 |
| mask-heart | 风格 | 心形面膜 |
| mask-hexagon | 风格 | 六边形面具 |
| mask-pentagon | 风格 | 五角形面具 |
| mask-diamond | 风格 | 钻石形状面膜 |
| mask-star | 风格 | 五角星面具 |
| mask-star-2 | 风格 | 六角星面具 |
| mask-triangle | 风格 | 三角形面膜 |
| mask-half-1 | 修饰符 | 形状的左半部分（用于分割蒙版） |
| mask-half-2 | 修饰符 | 形状的右半部分（用于分割蒙版） |
基本用法
创建一个带有渐变背景的简单圆形蒙版。
1 2 3 | <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
1 2 3 | <div className="mask mask-circle h-24 w-24"> <div className="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
面具形状
将不同的几何形状应用于蒙版元素。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-squircle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-hexagon h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-squircle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
面罩尺寸
应用不同尺寸的蒙版以实现灵活的布局选项。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-16 w-16"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-24 w-24"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> <div class="mask mask-circle h-48 w-48"> <div class="w-full h-full bg-linear-to-br from-primary to-secondary"></div> </div> |
不同渐变的面具
将蒙版与各种渐变方向和颜色相结合。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-b from-primary to-accent"></div> </div> <div class="mask mask-hexagon h-32 w-32"> <div class="w-full h-full bg-linear-to-r from-secondary to-primary"></div> </div> <div class="mask mask-squircle h-32 w-32"> <div class="w-full h-full bg-linear-to-t from-error to-warning"></div> </div> <div class="mask mask-squircle h-32 w-32"> <div class="w-full h-full bg-linear-to-l from-success to-info"></div> </div> |
纯色面具
应用具有纯色背景颜色的蒙版以实现简单的设计。
html
1 2 3 4 | <div class="mask mask-circle h-24 w-24 bg-primary"></div> <div class="mask mask-squircle h-24 w-24 bg-secondary"></div> <div class="mask mask-hexagon h-24 w-24 bg-accent"></div> <div class="mask mask-squircle h-24 w-24 bg-info"></div> |
组合变体
在蒙版布局中混合不同的形状、大小和颜色。
html
1 2 3 4 5 6 7 | <div class="mask mask-hexagon h-48 w-48 bg-linear-to-r from-primary to-secondary"></div> <div class="mask mask-squircle h-40 w-40 bg-linear-to-br from-accent to-info"></div> <div class="mask mask-circle h-32 w-32"> <div class="w-full h-full bg-linear-to-t from-success to-warning"></div> </div> |
使用 Claude Code、Cursor 或其他 AI 编辑器？
Cherry MCP 为您的 AI 编辑器按需提供准确的 面具 类名称和结构。不再有幻觉课程。