css - 为什么 `border-left` 会影响 CSS 中椭圆的形状？

Question

这是创建一对半圆的一种方法:

.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，同时仍然保持右侧的椭圆形状，使自己成为一个不规则的图形。但实际上，它只是变成了一对半圆。为什么？

Answer 1

I mean it should extend the left side to 100px while still keep the shape of ellipse on the right side,making itself an irregular

这是边距而不是边框​​的目的:

.shape {
  width: 100px;
  height: 200px;
  border-radius: 50%;       
  background-color: gray;
  margin-left: 100px;
}

<div class="shape"></div>

border-radius适用于整体并考虑边框框作为引用

Percentages: Refer to corresponding dimension of the border box.^ref

然后你还可以阅读:

The two <length-percentage> values of the border-*-radius properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

所以很明显 50%在你的情况下会考虑 200px对于垂直半径(高度)，也会考虑 200px对于水平半径(宽度 + 左边框)，它将为您提供 horizontal radius = vertical radius 的逻辑结果这是一个圆圈。

如果您想要更多，您可以继续阅读有关如何计算内 Angular 的信息:

The padding edge (inner border) radius is the outer border radius minus the corresponding border thickness

在您的情况下，您有 50% (100px) - 100px = 0所以在你的情况下没有内半径，这就是为什么结果是只从一侧 flex 的边界。
减小边框宽度，您将开始看到曲率:

.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>