当然可以！而且完全不用复制你的video元素，我们可以借助CSS的backdrop-filter属性配合遮罩（mask）来实现这个效果，完美适配动态内容场景。

核心思路 #

你之前的径向渐变遮罩思路是对的，现在我们把遮罩层的逻辑调整一下：

• 用backdrop-filter: blur()给遮罩层下方的video内容添加模糊效果
• 用mask属性（配合径向渐变）让中心区域"穿透"遮罩，保持清晰；周围区域则应用模糊

这样既保留了单个video元素，又实现了模糊版的聚焦效果。

完整代码示例 #

<div class="focus"></div>
<video src="https://some-video" autoplay muted loop></video>

/* 先让video占满全屏，适配页面 */
video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* 保证视频比例不变，铺满容器 */
}

.focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  /* 可选：添加一层半透明背景，让模糊效果更柔和 */
  background-color: rgba(0, 0, 0, 0.2);
  /* 核心：对遮罩层下方的内容应用模糊 */
  backdrop-filter: blur(8px);
  /* 径向渐变遮罩：中心透明（不模糊），周围显示模糊效果 */
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 150px, black 160px);
  mask: radial-gradient(circle at 50% 50%, transparent 150px, black 160px);
}

关键细节说明 #

• backdrop-filter：这个属性是关键，它专门作用于元素背后的内容，不需要复制video就能给它添加滤镜，完美解决动态内容的适配问题。
• mask属性：通过径向渐变创建遮罩，中心的透明区域会让下方的video直接显示（无模糊），周围的黑色区域则会让backdrop-filter生效，实现模糊效果。你可以调整渐变里的150px和160px来改变聚焦区域的大小和边缘过渡的柔和度。
• 兼容性：现代浏览器都支持backdrop-filter和mask，如果需要兼容旧版Chrome/Safari，加上-webkit-前缀即可（示例里已经包含）。

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