如何去除CSS中filter blur()导致的屏幕边缘阴影？

这种边缘阴影是因为filter: blur()会将元素边缘的透明区域也纳入模糊计算，从而产生淡色阴影。可以通过以下几种方式解决：

• 方法一：扩大伪元素尺寸并裁剪
  给父容器添加overflow: hidden，同时让伪元素尺寸超出父容器（超出值建议和模糊半径一致），再通过定位将伪元素拉回对应位置，超出部分的模糊区域会被父容器裁剪，边缘阴影就会消失。修改代码如下：

/* 父容器需添加的样式 */
.parent {
  position: relative;
  overflow: hidden;
}

.parent::before {
  content: "";
  position: absolute;
  /* 各方向扩大20px，和blur值匹配 */
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  left: -20px;
  top: -20px;
  background: linear-gradient(to right, rgba(11, 11, 11, 0.766), rgba(11, 11, 11, 0.766)) , url('/Obrazek\ 1.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-color: black;
  filter: blur(20px);
}

• 方法二：用transform缩放伪元素
  通过transform: scale()放大伪元素，配合父容器的overflow: hidden裁剪超出的模糊区域，同样能解决边缘阴影问题：

.parent {
  position: relative;
  overflow: hidden;
}

.parent::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(11, 11, 11, 0.766), rgba(11, 11, 11, 0.766)) , url('/Obrazek\ 1.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-color: black;
  filter: blur(20px);
  /* 放大比例根据模糊半径调整，这里用1.1示例 */
  transform: scale(1.1);
}

• 方法三：调整背景尺寸与定位
  如果背景图片允许，将background-size设为大于100%的数值，同时让背景居中，让背景内容超出伪元素范围，这样模糊后的边缘不会出现透明区域的阴影：

.parent::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(11, 11, 11, 0.766), rgba(11, 11, 11, 0.766)) , url('/Obrazek\ 1.jpeg');
  background-repeat: no-repeat;
  background-size: 110% 110%;
  background-position: center;
  background-color: black;
  filter: blur(20px);
}

你之前尝试的backdrop-filter是针对元素后方的内容做模糊，和当前伪元素自身的filter: blur()逻辑不同，所以无法解决这个问题。

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