设置border-bottom与border-radius时顶部边框异常显示的解决方法

当元素同时设置border-radius: 100%和border-bottom时，顶部会隐约出现本不该存在的淡色边框，这是浏览器亚像素渲染机制导致的伪影问题。以下是几种有效的缓解方案：

方案一：用box-shadow替代border-bottom #

利用box-shadow的渲染逻辑避开边框与圆角的冲突，不会触发亚像素伪影：

body {
  background: black;
}

div {
  width: 200px;
  height: 20px;
  margin: 20px;
  background: black;
  border-radius: 100%;
  /* 模拟底部边框效果 */
  box-shadow: 0 1px 0 white;
}

方案二：添加overflow: hidden裁剪伪影 #

通过overflow: hidden将元素边界外的亚像素伪影裁剪掉：

body {
  background: black;
}

div {
  width: 200px;
  height: 20px;
  margin: 20px;
  background: black;
  border: none;
  border-bottom: 1px solid white;
  border-radius: 100%;
  overflow: hidden;
}

方案三：替换100%圆角为固定像素值 #

极端的100%圆角会增加浏览器渲染计算的复杂度，换成与元素高度一致的固定圆角值，能降低亚像素问题的触发概率：

body {
  background: black;
}

div {
  width: 200px;
  height: 20px;
  margin: 20px;
  background: black;
  border: none;
  border-bottom: 1px solid white;
  border-radius: 20px; /* 与元素高度一致 */
}

方案四：用伪元素模拟底部边框 #

将底部边框独立放在伪元素中，通过定位控制显示区域，避免主元素边框与圆角的渲染冲突：

body {
  background: black;
}

div {
  width: 200px;
  height: 20px;
  margin: 20px;
  background: black;
  border-radius: 100%;
  position: relative;
}

div::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: white;
  border-radius: 0 0 100% 100%; /* 匹配主元素底部圆角 */
}

内容的提问来源于stack exchange，提问作者Michał Miszczyszyn