如何仅用CSS实现图形XOR？解决对齐后轮廓残留问题

出现这种轮廓是因为浏览器对旋转元素的抗锯齿处理：当两个旋转后的条形完全重叠时，边缘的半透明抗锯齿像素在mix-blend-mode: difference（等效XOR）模式下无法完全抵消，最终留下淡色轮廓。

解决方案：开启硬件加速消除抗锯齿残留 #

通过给元素添加translateZ(0)触发GPU硬件加速，让浏览器用更精确的像素合成逻辑处理旋转元素，减少半透明边缘像素的产生，从而实现完全抵消的XOR效果。

修改后的完整代码：

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: invert(100%);
    position: relative;
    height: 100vh;
    transform-style: preserve-3d; /* 配合硬件加速，提升合成精度 */
}

.a {
    position: absolute;
    width: 250px;
    height: 50px;
    transform: rotate(45deg) translateZ(0); /* 开启硬件加速 */
    background: white;
}

.b {
    position: absolute;
    width: 250px;
    height: 50px;
    transform: rotate(-45deg) translateZ(0); /* 开启硬件加速 */
    mix-blend-mode: difference;
    background: white;
    animation: spin 1s infinite alternate;
}

@keyframes spin {
  0% { transform: rotate(30deg) translateZ(0) } /* 动画帧中也要保留硬件加速属性 */
  50% { transform: rotate(45deg) translateZ(0) }
  100% { transform: rotate(60deg) translateZ(0) }
}

<div class="container">
  <div class="a"></div>
  <div class="b"></div>
</div>

原理说明 #

translateZ(0)会让浏览器将元素交由GPU渲染，GPU的矢量渲染逻辑能更精准地处理旋转后的边缘，避免产生导致轮廓残留的半透明抗锯齿像素，确保两个白色元素在完全重叠时，通过difference模式完全抵消为黑色（与容器背景一致）。

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