CSS奇技淫巧：用你意想不到的4种属性实现裁剪遮罩效果

背景

在公司开发图片裁剪功能时，需要实现一个裁剪框效果：选中区域清晰显示，而周围区域用半透明遮罩覆盖。正常我实现会用4个div分别盖住上、下、左、右四个区域用于裁剪框周围的遮罩。

本文将介绍几种纯CSS实现的巧妙实现方案，主要内容有：

box-shadow 阴影方法
outline 轮廓法
clip-path 裁剪方法
background 渐变方法

展示的效果如下：

下面分别介绍下每种方式的实现。

1. box-shadow 方法

原理是利用 box-shadow 的扩散半径特性，设置一个超大的阴影覆盖整个画布。优点是：代码量最少，只需一行CSS，实现简单。

js 复制代码

.crop-box {
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

2. outline 方法

原理和box-shadow 类似，使用超大的 outline 实现遮罩。 outline（轮廓）与border类似，但不占用文档流空间，且不会影响元素尺寸。通过超大outline覆盖非裁剪区域，实现遮罩效果。

js 复制代码

.crop-box {
  outline: 9999px solid rgba(0, 0, 0, 0.5);
}

3. 伪元素 + clip-path 方法

原理是使用 ::before 伪元素创建遮罩，通过 clip-path 的 polygon 裁剪出中间镂空区域。

js 复制代码

  .wrapper::before {
      content: '';
      background: rgba(0, 0, 0, 0.5);
      clip-path: polygon(
          0 0, 0 100%, 50px 100%, 50px 50px,
          250px 50px, 250px 200px, 50px 200px,
          50px 100%, 100% 100%, 100% 0
      );
  }

4. background 渐变方法

原理是使用 linear-gradient 创建十字交叉的渐变遮罩。利用线性渐变（linear-gradient）的"颜色断层"特性，生成四宫格状的遮罩效果，非裁剪区域用半透明色覆盖，目标区域为透明。

js 复制代码

.wrapper {
    position: absolute;
    inset: 0;
    background-image:
        /* 上方遮罩 */
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        /* 下方遮罩 */
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        /* 左侧遮罩 */
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
        /* 右侧遮罩 */
        linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    background-size:
        100% 50px,      /* 上方 */
        100% calc(100% - 200px), /* 下方 */
        50px 150px,     /* 左侧 */
        calc(100% - 250px) 150px; /* 右侧 */
    background-position:
        0 0,            /* 上方 */
        0 200px,        /* 下方 */
        0 50px,         /* 左侧 */
        250px 50px;     /* 右侧 */
    background-repeat: no-repeat;
    pointer-events: none;
}

总结

最后总结一下：实现裁剪框遮罩效果有多种方案,在实际项目中，推荐使用 box-shadow 方法，简单高效。