如何在不减小边界边缘的情况下将border-top-radius设置为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() 对齐 水平：

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;