如何在CSS中创建方形渐变用作遮罩 实现可调整大小的边缘淡出模糊方块

你可以通过CSS自定义变量+多层渐变遮罩的方案实现需求，该方案支持任意调整模糊方块的宽高、模糊强度、边缘淡出宽度，不需要修改核心逻辑代码。

核心实现思路 #

• 用CSS自定义属性统一管理所有可调整参数，修改时仅需更新变量值即可
• 叠加两个方向的线性渐变作为遮罩，同时实现上下、左右四边的淡出效果，渐变位置自动适配当前元素的宽高

完整代码示例 #

#image {
  width: 300px;
  height: 300px;
  background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
  position: relative;
}

.blur-block {
  /* 可自由调整的参数 */
  --block-width: 180px; /* 模糊块宽度 */
  --block-height: 150px; /* 模糊块高度 */
  --blur-strength: 12px; /* 模糊强度 */
  --fade-width: 20px; /* 边缘淡出的宽度 */
  --position-top: 75px; /* 距离父容器顶部距离 */
  --position-left: 60px; /* 距离父容器左侧距离 */

  position: absolute;
  top: var(--position-top);
  left: var(--position-left);
  width: var(--block-width);
  height: var(--block-height);
  backdrop-filter: blur(var(--blur-strength));
  
  /* 四边渐变遮罩 */
  mask-image: 
    linear-gradient(to bottom, transparent, #000 var(--fade-width), #000 calc(100% - var(--fade-width)), transparent),
    linear-gradient(to right, transparent, #000 var(--fade-width), #000 calc(100% - var(--fade-width)), transparent);
  -webkit-mask-image: 
    linear-gradient(to bottom, transparent, #000 var(--fade-width), #000 calc(100% - var(--fade-width)), transparent),
    linear-gradient(to right, transparent, #000 var(--fade-width), #000 calc(100% - var(--fade-width)), transparent);
}

<div id="image">
  <div class="blur-block">Blurred</div>
</div>

额外说明 #

• 如果你只需要单边/双边的淡出效果，删除mask-image中不需要的渐变层即可
• 若需要圆角模糊块，直接给.blur-block添加border-radius属性即可，遮罩会自动适配圆角
• 针对不支持backdrop-filter的老旧浏览器，可以改用背景图截取+模糊的降级方案，通过background属性设置和底层一致的背景图，调整background-position对齐位置后添加filter: blur()实现模糊效果，再搭配同样的遮罩逻辑即可实现兼容。

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