问题描述
这是创建一对半圆的一种方法：
.shape {
width: 100px;
height: 200px;
border-radius: 50%;
background-color: gray;
border-left: 100px solid black;
}<div class="shape"></div> div如下所示：
将border-left添加到div后，椭圆的形状似乎会改变。但是我实际上不知道为什么。在我看来，在添加border-left之前， div必须是椭圆形。添加完后，它应该看起来像这样：
我的意思是应该将左侧延伸到100px，同时仍然保持椭圆形在右侧，使自己成为不规则的图形。但是实际上，它只是变成了一对半圆。为什么？
解决方法
我的意思是，它应该将左侧扩展到100px，同时仍保持椭圆形在右侧，使其自身成为不规则的
这是保证金不设边界的目的：
.shape {
width: 100px;
height: 200px;
border-radius: 50%;
background-color: gray;
margin-left: 100px;
}<div class="shape"></div>
border-radius应用于整体，并以边框作为参考
百分比：是指边框的相应尺寸。ref
然后，您还可以阅读：
border-*-radius属性的两个
<length-percentage>值定义了四分之一椭圆的半径，该半径定义了外边界边角的形状。第一个值是水平半径，第二个是垂直半径。如果省略第二个值，则从第一个复制。如果任一长度为零，则角为正方形，而不是圆角。 水平半径的百分比是指边框的宽度，而垂直半径的百分比是指边框的高度。不允许使用负值。
因此很明显，您的情况下，50%将考虑200px作为垂直半径（高度），并且还将考虑200px作为水平半径（宽度+左边框）这会给您horizontal radius = vertical radius的逻辑结果，它是一个圆圈。
如果需要更多信息，可以继续阅读如何计算内角：
填充边（内边界）半径是外边界半径减去相应的边界厚度
在您的情况下，您有50% (100px) - 100px = 0，因此在您的情况下没有内半径，这就是为什么结果仅从一侧向左弯曲。
减小边框宽度，您将开始看到一个曲率：
.shape {
width: 100px;
height: 150px;
border-radius: 50%;
background-color: gray;
border-left: 50px solid black;
}<div class="shape"></div>
这是一个动画，可以更好地查看半径的效果：
.shape {
width: 20px;
height:70px;
border-radius: 50%;
background-color: gray;
border-left: 50px solid black;
animation:change 3s linear alternate infinite;
}
@keyframes change{
to {
width:250px;
height:300px;
}
}<div class="shape"></div>
在某些情况下，边框不会影响形状。使用box-sizing:border-box时。逻辑保持不变，但是在这种情况下，边框包括在宽度中，因此宽度不会更改，因此我们的初始半径不会更改。
.shape {
width: 100px;
height:200px;
border-radius: 50%;
box-sizing:border-box;
background-color: gray;
border-left: 0px solid black;
animation:change 3s linear alternate infinite;
}
@keyframes change{
to {
border-width:100px;
}
}<div class="shape"></div>,
我制作了一个GIF，以使您更好地理解。对于此示例，我最初删除了border-radius属性，以消除与提及“椭圆”有关的任何偏见。
因此，基本上，您只是在CSS Box Model中添加一些边框，然后border-radius: 50%会将其转换为圆形
