使用多面板框架改进 UI 模糊效果

Source: Dev.to

介绍

在网页 UI 中实现一致且视觉上令人满意的模糊效果可能相当棘手。浏览器差异和意外的堆叠上下文常常导致实现破碎或不可靠。本文详细说明了 devlog‑ist/landing 项目是如何通过用更稳健的多面板框架技术替代有问题的 clip‑path 方法来实现背景模糊的。

问题：不一致的 Clip‑Path 模糊

最初的实现尝试使用 CSS clip‑path 并配合 evenodd 规则来创建一个凹口，从而在目标元素周围产生模糊效果。随后在该裁剪区域上应用 backdrop‑filter。然而，这种做法并不可靠，因为 clip‑path 在不同浏览器和堆叠上下文中未能始终如一地创建所需的凹口。结果是模糊效果不一致，有时未能将目标元素排除在模糊之外。

解决方案：四面板框架 + Backdrop Filter

为了解决这些不一致性，实施方案被重构为使用四面板框架方法。这涉及在目标元素周围创建四个定位的 div（上、右、下、左）。每个 div 都单独应用 backdrop‑filter，从而在周围区域产生模糊效果，同时可靠地将目标元素排除在模糊之外，无论堆叠上下文如何。该方法确保在各种浏览器和场景下都能获得一致的模糊效果。

.blur-container {
  position: relative;
}

.blur-panel {
  position: absolute;
  backdrop-filter: blur(10px);
  /* Additional styling for positioning and size */
}

.blur-panel-top {
  top: 0;
  left: 0;
  width: 100%;
  height: /* some height */;
}

/* Similar styles for .blur-panel-right, .blur-panel-bottom, .blur-panel-left */

.target-element {
  position: relative; /* Ensure it's above the blur panels */
  /* Other styles */
}

在此示例中，.blur-container 包裹了模糊面板和目标元素。每个 .blur-panel 通过绝对定位形成框架，并使用 backdrop‑filter 实现模糊。.target-element 也采用相对定位，以确保它位于模糊面板之上。

新方法的优势

• 可靠性： 四面板框架始终将目标元素排除在模糊之外，解决了之前 clip‑path 方法的问题。
• 跨浏览器兼容性： 该方法在不同浏览器中都能可靠工作，提供更统一的用户体验。
• 灵活性： 只需修改四个面板的尺寸即可轻松调整模糊效果的大小和位置。

关键要点

在实现 UI 效果（如模糊）时，应优先考虑稳健性和跨浏览器兼容性。像多面板框架这样的简单直接的方案，往往比使用 clip‑path 等复杂 CSS 技巧更能提供可靠的结果，尤其是在处理堆叠上下文和浏览器差异时。