css - 我们如何在不减少边界边缘的情况下将边界顶部半径设置为 50%？

Question

我想在整个半圆中具有相同的边框宽度 px 。

请参考以下图片附件：

#loader-frame {
  height: 300px;
  width: 300px;
  position: relative;
  background: #fff;
  border-top: 3px solid #3498db;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

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

感谢您的任何帮助。

Answer 1

您可以制作 的两侧border-*-color transparent并使用transform: rotate()将其水平对齐：

#loader-frame {
  height: 300px;
  width: 300px;
  position: relative;
  background: #fff;
  border: 3px solid #3498db; /* modified */
  display: flex;
  /*flex-flow: row nowrap; by default*/
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* added */
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(45deg);
}

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