css制作蒙版

使用 CSS 制作蒙版

在 CSS 中，蒙版（Mask）通常用于控制元素的可见部分，可以通过遮罩图像或渐变实现。以下是几种常见的实现方法：

使用 mask-image 属性

通过 mask-image 属性可以指定一个图像或渐变作为蒙版。蒙版的透明部分会隐藏元素的对应区域，不透明部分则显示元素内容。

.element {
  mask-image: url('mask.png');
  mask-size: cover;
  mask-repeat: no-repeat;
}

使用 SVG 蒙版

SVG 提供了更灵活的蒙版功能，可以通过 <mask> 元素定义蒙版，并在 CSS 中引用。

<svg width="0" height="0">
  <mask id="circle-mask">
    <circle cx="50" cy="50" r="40" fill="white" />
  </mask>
</svg>

<div class="element"></div>

.element {
  mask: url('#circle-mask');
}

使用 CSS 渐变蒙版

通过 CSS 的渐变函数（如 linear-gradient）可以创建动态蒙版效果。

.element {
  mask-image: linear-gradient(to right, transparent, black);
}

使用 clip-path 实现简单蒙版

clip-path 可以直接裁剪元素的形状，虽然不是传统意义上的蒙版，但可以实现类似效果。

.element {
  clip-path: circle(50% at 50% 50%);
}

兼容性处理

部分旧浏览器可能需要前缀或替代方案：

.element {
  -webkit-mask-image: url('mask.png');
  mask-image: url('mask.png');
}

通过以上方法，可以灵活实现各种蒙版效果，从简单的形状裁剪到复杂的动态遮罩均可覆盖。