CSS filter模糊效果在Microsoft Edge中无法实现清晰边缘问题

我之前在做类似模糊效果的时候也踩过Edge这个坑，试了几个方法，亲测有效的有下面这几个，你可以挨个试试：

方案一：用clip-path替代overflow:hidden #

Edge在处理filter和overflow:hidden的叠加渲染时，偶尔会出现优先级冲突导致裁剪失效的情况，用clip-path可以更强制地定义裁剪区域，直接切掉模糊边缘：

.parent {
  width: 100px;
  height: 100px;
  /* 用clip-path定义和容器完全一致的裁剪区域 */
  clip-path: inset(0 0 0 0);
}
.child {
  -webkit-filter: blur(10px);
  filter: blur(10px); /* 别忘了添加标准filter属性 */
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

clip-path: inset(0 0 0 0)的四个参数对应上下左右的裁剪距离，全部设为0就会精准裁剪出和父容器一样大的区域，完美解决Edge里模糊边缘溢出的问题。

方案二：用伪元素承载模糊效果 #

有时候直接给<img>或元素本身加filter，Edge的渲染引擎会让模糊边缘“突破”overflow:hidden的限制，把模糊效果转移到伪元素上，通过背景图实现，稳定性会更高：

图片模糊的情况： #

.parent {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  background: url('http://placekitten.com/100') center/cover no-repeat;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

对应的HTML只需要空的父容器即可：

<div class="parent"></div>

纯色背景模糊的情况（对应你第二个例子）： #

.parent {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  background: #000;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

这个方法绕开了直接给元素加filter的渲染问题，伪元素的模糊效果会被父容器的overflow:hidden正确裁剪。

方案三：调整缩放比例+精确负边距 #

如果不想改动结构，也可以尝试增大缩放比例，并配合精确计算的负边距，让放大后的元素完全覆盖模糊边缘的溢出部分：

.parent {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.child {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  /* 负边距计算方式：(缩放后尺寸 - 原尺寸)/2，这里(150-100)/2 = 25px */
  margin: -25px;
  width: 150px;
  height: 150px;
}

这里把缩放比例调到1.5，同时设置-25px的负边距，让元素超出父容器的部分刚好等于模糊的范围，Edge里的模糊边缘就会被完全裁掉。

额外注意点： #

• 记得同时添加标准的filter和transform属性，不要只保留-webkit-前缀，Edge现在已经支持标准属性；
• 如果是动态加载的图片，确保伪元素的背景图路径正确，或者在图片加载完成后再应用模糊效果。

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