CSS实现

css 中mask属性，最早是出现在Safari浏览器上的，可以追溯到09年

目前得到了大部分浏览器支持。在移动端需要加-webkit-使用

image.png

mask属性主要有

mask-border
mask-border-mode
mask-border-outset
mask-border-repeat
mask-border-slice
mask-border-source
mask-border-width
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

mask 属性上面属性的简称

一般用法，我们使用mask-image属性来配合使用

<div class="box">
</div>
<style>
  .box {
      background: #000;
      width: 200px;
      height: 100px;
      -webkit-mask-image: linear-gradient(to right, rgba(0,0,0, 0) 0, rgba(0,0,0,1))
  }
</style>

效果

叠加蒙版上的效果

注意这个属性要是设置全黑的话，可以实现剪切效果与css 属性 clip 和clip-path 形成的结果相似

clip 和 clip-path 具体用法见mdn

SVG 的MASK标签

svg中的mask标签锚点可以直接在css中引用起到添加蒙版的效果

eg:

<svg>
  <defs>
    <mask id="mask">
      <rect x="0" y="0" width="100" height="200" fill="#000" />
    </mask>
  </defs>
</svg>
<style>
  .box {
    mask-image: url(#mask);
     mask: url(#mask) // 对外链接的支持
    }
</style>