如何设置border-top-radius:50%且保持半圆边框宽度一致？

嘿，我懂你遇到的这个烦恼——当用border-top配合border-radius:50%制作半圆边框时，顶部边框的两端会莫名其妙变细，这是因为浏览器处理单边边框+圆角的渲染逻辑导致的：它会把单一边框的宽度沿着圆形弧度逐渐收缩，而非保持统一粗细。

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

方案一：利用伪元素实现均匀边框 #

这种方法通过容器的overflow:hidden裁剪出圆形区域，再用伪元素创建一个更大的半圆边框，确保边缘粗细一致：

#loader-frame {
  height: 300px;
  width: 300px;
  position: relative;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loader-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%; /* 高度设为容器的2倍，确保半圆覆盖顶部 */
  border: 3px solid #3498db;
  border-radius: 50%;
  box-sizing: border-box;
}

<div id="loader-frame"></div>

方案二：设置全边框+透明隐藏多余部分 #

这种方法更简洁，通过给四个边框赋值，将不需要的三边设为透明，让浏览器正确渲染圆角处的边框宽度：

#loader-frame {
  height: 300px;
  width: 300px;
  position: relative;
  background: #fff;
  /* 设置四个边框，仅保留顶部可见 */
  border: 3px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="loader-frame"></div>

为什么方案二有效？ #

当你只设置border-top时，浏览器没有其他边框作为圆角的“支撑”，会自动收缩边框两端的宽度来适配圆形弧度。而设置全边框（其他三边透明）后，浏览器会为每个圆角分配完整的边框宽度，这样整个顶部边框（包括左右圆角部分）就能保持均匀的3px粗细了。

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