如何实现模糊效果的渐变过渡？[CSS, HTML]

我在网站中给图片添加了模糊边框，现在想要实现渐变过渡的模糊效果——边框边缘模糊极淡，越靠近图片模糊效果越强。当前使用的CSS代码如下：

.block {
  padding: 1em;
  background-color: rgb(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 5px;
}

解决方案 #

可以通过伪元素结合径向渐变与backdrop-filter实现渐变模糊效果，具体代码如下：

.block {
  position: relative;
  padding: 1em;
  border-radius: 5px;
  /* 移除原有backdrop-filter，将模糊逻辑移至伪元素 */
}

.block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 径向渐变控制透明度：中心（靠近图片）透明度高，边缘透明度为0 */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(12px);
  z-index: -1; /* 确保伪元素不遮挡内部内容 */
}

说明 #

• 利用径向渐变的透明度变化，让模糊效果从中心（图片区域）向边缘逐渐减弱，边缘几乎无模糊
• 伪元素通过inset:0填满父容器，继承圆角保证样式统一
• 若要调整模糊过渡的范围，可修改径向渐变中的百分比参数，比如将100%改为80%，让模糊消失的位置更靠近中心

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