Mask Component
CSS-only Tailwind CSS mask for clipping images into shapes — circle, squircle, heart, hexagon, and more. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
遮罩組件將幾何或自訂形狀應用於圖像和元素，創造視覺興趣和獨特的設計。蒙版採用 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> |