如何不使用mask和clip，仅用纯CSS实现通用元素外侧变暗遮罩效果

下面提供两种无需JavaScript的纯CSS实现方案，可适配所有普通元素场景：

方案1：box-shadow 实现（兼容性最优） #

利用超大扩散半径的外阴影实现外侧遮罩，无需额外图片或SVG资源，兼容所有现代浏览器及IE9+。

核心代码 #

<!-- 外层容器 -->
<div class="mask-container">
  <!-- 需要高亮的目标元素，图片、视频、自定义div都可以适配 -->
  <img src="你的资源地址" class="highlight-target" alt="示例资源">
</div>

.mask-container {
  position: relative;
  overflow: hidden; /* 裁剪超出容器的阴影部分 */
  width: 100%;
  height: 500px; /* 可按需调整容器尺寸 */
}
.highlight-target {
  position: absolute;
  /* 按需调整高亮区域的位置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 核心逻辑：设置超大扩散半径的半透明外阴影 */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
  z-index: 1;
}

适用场景 #

• 矩形高亮区域需求，比如图片裁剪器、视频剪辑器的选框遮罩
• 需要兼容旧浏览器的场景

方案2：CSS 渐变mask 实现（支持自定义高亮形状） #

你之前认为mask仅支持图片/SVG是认知偏差，现代CSS已经支持渐变作为mask的源，可轻松实现圆形、圆角矩形、多边形等任意形状的高亮效果。

核心代码 #

.mask-container {
  position: relative;
  width: 100%;
  height: 500px;
}
.mask-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  /* 核心逻辑：用渐变定义透明高亮区域，其余部分保留半透明遮罩 */
  /* 下方示例是居中300*200的矩形高亮，如需圆形可替换为radial-gradient */
  -webkit-mask: linear-gradient(#000, #000) 50% 50% / 300px 200px no-repeat,
                linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) 50% 50% / 300px 200px no-repeat,
        linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
  mask-composite: exclude;
  pointer-events: none; /* 不遮挡下方元素的交互操作 */
}

适用场景 #

• 非矩形的高亮需求，比如圆形引导遮罩、圆角选框遮罩
• 无需兼容过旧浏览器的场景

效果适配说明 #

两种方案均可完美匹配你提到的两类场景：

• 矩形高亮的图片裁剪器遮罩：直接使用方案1，或调整方案2的mask渐变尺寸即可实现
• 自定义选框的视频剪辑器遮罩：调整高亮区域的位置、尺寸参数即可匹配需求

内容的提问来源于stack exchange，提问作者agusterodin