使用CSS模糊背景时屏幕边缘未模糊/透明问题求助

出现边缘未模糊/透明的原因是：filter: blur()会对元素边缘的内容进行模糊处理，但当伪元素尺寸和视口完全一致时，边缘的模糊效果会被视口裁剪，导致露出透明区域。

只需调整伪元素的尺寸，让它比视口大出模糊半径的数值，就能让模糊效果覆盖整个视口边缘，解决问题。修改后的完整代码如下：

body {
  background: radial-gradient( 50% 50% at 50% 50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%), url("https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  min-height: 100vh; /* 确保body高度至少覆盖视口 */
}

body::before {
  content: "";
  position: absolute;
  inset: -8px; /* 上下左右向外扩展8px，与模糊半径一致 */
  background: inherit;
  filter: blur(8px);
  z-index: -1;
}

关键修改说明： #

• 使用inset: -8px让伪元素的范围超出视口8px（和模糊半径8px匹配），这样边缘的模糊内容不会被裁剪。
• 给body添加min-height: 100vh，避免页面内容不足时背景高度不够的问题。

如果你更习惯用宽高+margin的方式，也可以替换伪元素的样式：

body::before {
  content: "";
  position: absolute;
  width: calc(100vw + 16px); /* 左右各扩展8px，总宽度增加16px */
  height: calc(100vh + 16px); /* 上下各扩展8px，总高度增加16px */
  margin: -8px;
  background: inherit;
  filter: blur(8px);
  z-index: -1;
}

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