我来帮你搞定这个困扰！你遇到的白色边框覆盖后仍有细微红色残留，大概率是浏览器渲染时的抗锯齿偏差、元素层级/定位不够精准，或者是边框重叠的渲染逻辑导致的。下面给你几个针对性的解决方案，从根源上消除残留：

方案一：用clip-path替代白色遮罩（推荐） #

与其用白色边框去覆盖红色部分，不如直接裁剪红色圆圈的显示范围，这样完全不会有残留问题。结合你的旋转动画，我们可以通过动态调整clip-path来实现结束时红色部分缩短的效果：

/* 红色旋转圆圈 */
.red-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  animation: top-circle 1s linear forwards;
  /* 初始裁剪范围：显示右侧半圈 */
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%);
}

@keyframes top-circle {
  from {
    transform: rotate(-25deg);
    /* 初始裁剪范围 */
    clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%);
  }
  to {
    transform: rotate(335deg);
    /* 结束时缩小裁剪范围，实现红色部分缩短 */
    clip-path: polygon(50% 50%, 50% 0%, 60% 0%, 60% 100%, 50% 100%);
  }
}

你可以调整clip-path里的60%数值，来控制红色部分最终的长度，完全不需要额外的白色遮罩元素。

方案二：优化白色遮罩的渲染与定位 #

如果你坚持使用白色遮罩的方案，可以通过以下调整消除残留：

• 精准对齐与层级：确保白色遮罩和红色圆圈的宽高、边框粗细、border-radius完全一致，并且设置正确的层级和定位：

.red-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid red;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
  z-index: 1;
  /* 开启GPU加速，减少渲染偏差 */
  transform: translateZ(0);
  will-change: transform;
}

.white-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid white;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 2; /* 确保遮罩在红色圆圈上方 */
  transform: translateZ(0);
  will-change: transform;
}

• 调整遮罩的边框可见性：如果只需要遮罩部分区域，可以让白色遮罩只显示需要覆盖的边框段，比如用border-left: 4px solid white;代替全边框，这样减少不必要的渲染重叠。

为什么这些方法有效？ #

• clip-path直接定义元素的显示区域，不存在覆盖带来的抗锯齿残留问题；
• transform: translateZ(0)和will-change: transform会触发GPU硬件加速，让浏览器更精准地渲染动画元素，减少模糊和残留；
• 精准的定位和层级确保遮罩完全覆盖目标区域，避免视觉偏差。

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