如何消除两个设置backdrop-filter: blur()元素并排的中间丑线？

AI 小北

2026-5-26

解决带backdrop-filter: blur()元素并排时的中间线条问题

嘿，这个问题我之前踩过坑！当两个加了backdrop-filter: blur()的元素并排摆放时，浏览器的渲染bug确实会让中间多出一条难看的细线。不过有个实用的小技巧能解决它，而且刚好符合你提到的浏览器支持范围~

解决思路

核心是让两个元素的渲染层合并，避免边缘渲染错位。最有效的方式是给两个元素都添加transform: translateZ(0)，触发GPU硬件加速，让它们在同一层渲染，那条烦人的线条就会消失了。如果这个方法效果不够，还可以给其中一个元素加个极小的负边距（比如-1px），直接把线条盖住。

完整代码示例

<div class="container">
  <div class="blur-card"></div>
  <div class="blur-card"></div>
</div>

.container {
  position: relative;
  width: 400px;
  display: flex; /* 让子元素并排排列 */
}

.blur-card {
  flex: 1; /* 平分容器宽度 */
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  /* 关键属性：触发GPU加速，消除中间线条 */
  transform: translateZ(0);
}

/* 备用方案：如果还是有线条，添加负边距覆盖 */
.blur-card:first-child {
  margin-right: -1px;
}