---
title: "Mask"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Mask for clipping images into circles, hexagons, and squircles. Pure CSS shapes for avatars, galleries, and creative UI layouts."
url: https://frutjam.com/zh-hant/components/mask
---

# Mask Component

遮罩組件將幾何或自訂形狀應用於圖像和元素，創造視覺興趣和獨特的設計。蒙版採用 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   | 修飾符 | 形狀的右半部（用於分割遮罩）   |

## 基本用法

創建一個帶有漸變背景的簡單圓形蒙版。

## 面具形狀

將不同的幾何形狀應用於遮罩元素。

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