如何消除CSS实现的分割区块之间的微小间距？

嘿，我来帮你搞定这个烦人的细缝问题！你遇到的这个微小间距，其实是浏览器亚像素渲染导致的——当你把背景高度拆成50%的时候，在一些屏幕分辨率下，浏览器没办法完美对齐两个渐变背景的边缘，就会露出底下的黑色背景，形成这条细缝。

下面给你两个靠谱的解决方案：

方案1：微调背景尺寸让重叠覆盖细缝 #

只需要修改background-size，把50%改成calc(50% + 1px)，让上下两个渐变背景稍微重叠1像素，就能彻底盖住那条细缝了：

body, main { width: 100%; margin: 0; background: black; }
.container { display: block; height: 200px; margin: auto; }
.block { 
  width: 100%; 
  height: 100%; 
  background: 
    linear-gradient(-135deg, transparent 45px, wheat 0) top right, 
    linear-gradient(45deg, transparent 45px, wheat 0) bottom left; 
  background-size: 100% calc(50% + 1px); /* 关键修改：让背景高度略超50% */
  background-repeat: no-repeat; 
}

方案2：用伪元素拆分上下区块（更稳定） #

如果不想依赖背景拼接，还可以用伪元素把.block分成上下两个独立部分，从根源上避免对齐问题：

body, main { width: 100%; margin: 0; background: black; }
.container { display: block; height: 200px; margin: auto; }
.block { 
  width: 100%; 
  height: 100%; 
  position: relative; /* 为伪元素提供定位基准 */
  overflow: hidden;
}
/* 上半部分渐变 */
.block::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(-135deg, transparent 45px, wheat 0);
}
/* 下半部分渐变 */
.block::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(45deg, transparent 45px, wheat 0);
}

这两种方法都能解决问题，方案2的兼容性和稳定性会更好一些，适合不同屏幕尺寸的场景。

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