CSS局部透明模糊效果：一步到位
本文介绍如何使用CSS的backdrop-filter和mask属性，轻松实现局部透明模糊效果。backdrop-filter用于模糊背景，mask则定义半透明区域。
以下CSS代码演示了如何创建局部透明模糊效果：
<code class="css">.wrap {
backdrop-filter: blur(5px);
-webkit-mask: radial-gradient(circle at calc(var(--x, .5) * 100%) calc(var(--y, .5) * 100%), transparent 50px, black 51px);
}</code>
这段代码模糊整个背景，并使用径向渐变创建一个半径为50像素的透明圆形区域。--x和--y变量通过JavaScript控制透明区域的位置。
立即学习“前端免费学习笔记（深入）”；
示例代码如下：
<code class="html"><div class="wrap">
<div class="content">
<!-- 内容区域 -->
</div>
</div>
<script>
const wrap = document.querySelector('.wrap');
wrap.style.setProperty('--x', 0.5); // 设置X坐标
wrap.style.setProperty('--y', 0.5); // 设置Y坐标
</script></code>
通过修改--x和--y的值，即可调整透明区域的位置，从而实现灵活的局部透明模糊效果。 注意，为了更好的视觉效果，我们使用了黑色(black)作为不透明区域的颜色，而不是示例中的红色(red)。
