为何CSS复选框滑块开关无法实现像素级完美渲染？

当前这款CSS滑块开关的渲染表现如下：

• 在约1400×800分辨率的笔记本显示屏上，可实现像素级完美渲染；
• 在1920×1080分辨率、Windows 10「缩放布局」设为100%且浏览器缩放为125%时，无法实现像素级完美渲染；
• 在4K分辨率、缩放布局设为150%且浏览器缩放为150%时，可实现像素级完美渲染。

这里的非像素级完美指边框与深色圆形之间存在（亚像素级）空白间隙，表现为开关边框和深色圆形滑块之间出现细微的空白缝隙。

调整transparent -9px的值可让圆形更贴近左侧边框，但右侧会出现新圆形的边缘。

原代码示例 #

.switch {
  appearance: none;
  padding: 9px 18px;
  border-radius: 13px;
  background: radial-gradient(circle 9px, #001122 100%, transparent 100%) transparent -9px;
  border: 1px solid #001122;
}

.switch:checked {
  background-position: 9px;
}

<input type="checkbox" class="switch">

优化方案：使用伪元素实现滑块 #

基于背景定位的径向渐变方案容易在缩放场景下出现亚像素对齐问题，改用伪元素作为滑块能从根源避免这类问题，实现跨分辨率的完美渲染：

.switch {
  appearance: none;
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 13px;
  border: 1px solid #001122;
  background-color: transparent;
  cursor: pointer;
}

.switch::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #001122;
  transition: transform 0.2s ease;
  transform: translateY(1px);
}

.switch:checked::before {
  transform: translate(18px, 1px);
}

<input type="checkbox" class="switch">

方案说明 #

1. 用伪元素替代背景渐变作为滑块，通过绝对定位和transform控制位置，彻底避免背景定位带来的亚像素偏移问题；
2. 明确设置开关的宽高，替代padding实现精准尺寸控制，布局逻辑更清晰；
3. 使用transform的translate做位置过渡，浏览器对transform的渲染优化更到位，缩放时不易出现像素间隙；
4. 滑块初始位置通过translateY抵消边框宽度，确保和边框完美贴合，无间隙。

内容的提问来源于Stack Exchange，提问作者Basj