遮罩

遮罩将元素内容裁剪为常见形状。

类名	类型
遮罩	组件	使用形状遮罩内容
mask-squircle	样式	类圆角矩形
mask-heart	样式	心形
mask-hexagon	样式	垂直六边形
mask-hexagon-2	样式	水平六边形
mask-decagon	样式	十边形
mask-pentagon	样式	五边形
mask-diamond	样式	菱形
mask-square	样式	正方形
mask-circle	样式	圆形
mask-star	样式	星形
mask-star-2	样式	星形 (粗体)
mask-triangle	样式	三角形 (向上)
mask-triangle-2	样式	三角形 (向下)
mask-triangle-3	样式	三角形 (向左)
mask-triangle-4	样式	三角形 (向右)
mask-half-1	修饰符	仅裁剪遮罩的前半部分
mask-half-2	修饰符	仅裁剪遮罩的后半部分

类圆角矩形

<img
  class="$$mask $$mask-squircle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-squircle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-squircle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-squircle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

心形

<img
  class="$$mask $$mask-heart"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-heart"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-heart"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-heart"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

六边形

<img
  class="$$mask $$mask-hexagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-hexagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-hexagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-hexagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

六边形-2 (水平六边形)

<img
  class="$$mask $$mask-hexagon-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-hexagon-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-hexagon-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-hexagon-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

十边形

<img
  class="$$mask $$mask-decagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-decagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-decagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-decagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

五边形

<img
  class="$$mask $$mask-pentagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-pentagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-pentagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-pentagon"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

菱形

<img
  class="$$mask $$mask-diamond"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-diamond"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-diamond"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-diamond"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

正方形

<img
  class="$$mask $$mask-square"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-square"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-square"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-square"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

圆形

<img
  class="$$mask $$mask-circle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-circle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-circle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-circle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

星形

<img
  class="$$mask $$mask-star"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-star"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-star"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-star"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

星形-2 (粗体星形)

<img
  class="$$mask $$mask-star-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-star-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-star-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-star-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

三角形 (向上)

<img
  class="$$mask $$mask-triangle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-triangle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

三角形-2 (向下)

<img
  class="$$mask $$mask-triangle-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-triangle-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle-2"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

三角形-3 (向左)

<img
  class="$$mask $$mask-triangle-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-triangle-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle-3"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

三角形-4 (向右)

<img
  class="$$mask $$mask-triangle-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

            
                <img
  class="$$mask $$mask-triangle-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

<img
  class="$$mask $$mask-triangle-4"
  src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />

上一页 Join (组合项)

下一页 Stack

有问题吗？在 GitHub 上提问或 Discord 服务器

发现 Bug 了吗？在 GitHub 上提交 issue

喜欢 daisyUI 吗？分享出去！

支持 daisyUI 的开发： Open Collective

在 GitHub 上编辑此页面

AI 提示的文本版本

NEXUS
官方 daisyUI 控制面板模板

在 daisyUI 商店提供

更多详情

遮罩

类圆角矩形

心形

六边形

六边形-2 (水平六边形)

十边形

五边形

菱形

正方形

圆形

星形

星形-2 (粗体星形)

三角形 (向上)

三角形-2 (向下)

三角形-3 (向左)

三角形-4 (向右)

NEXUS 官方 daisyUI 控制面板模板

在 daisyUI 商店提供

NEXUS
官方 daisyUI 控制面板模板