如何修改 CSS 以使块的边缘羽化？

Question

如何修改 CSS 以使框的边缘具有羽化模糊效果？我希望盒子的背景有毛玻璃效果，而不是周围有尖锐的边缘，有羽化效果，可以逐渐与背景融为一体，但我不知道如何重写当前的CSS。希望能得到您的帮助，谢谢。

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1625&q=80');
  background-size: cover;
  .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius: 50%;
    background-color: rgba(225, 225, 225, 10%);
    backdrop-filter: blur(2px);
  }
}

<div class="wrap">
  <div class="box"></div>
</div>

Answer 1

我所理解的只是在任何一个代码片段下面添加：

box-shadow：插入 2px 2px 15px #fff； // 或者 盒子阴影：插入 2px 2px 15px rgba(255,255,255,.5)