<p>如何修改我的CSS，使盒子的边缘具有羽化模糊效果？我希望盒子的背景具有磨砂玻璃效果，而不是周围的锐利边缘，而是具有羽化效果，可以逐渐与背景融合，但我不知道如何修改当前的CSS。希望能得到你的帮助，谢谢。</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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);
}
}</pre>
<pre class="brush:html;toolbar:false;"><div class="wrap">
<div class="box"></div>
</div></pre>
<p><br /></p>
1
1167
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
我所理解的只是在下面添加任何一个代码片段：
box-shadow: inset 2px 2px 15px #fff; // 或者 box-shadow: inset 2px 2px 15px rgba(255,255,255,.5)