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

【问题标题】：Why does `border-left` influence the shape of ellipse in CSS?为什么`border-left`会影响CSS中椭圆的形状？
【发布时间】：2021-01-12 07:48:27
【问题描述】：

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

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

&lt;div class="shape"&gt;&lt;/div&gt;

div 看起来像这样：

在div上添加border-left后，椭圆的形状似乎会改变。但我实际上不知道为什么。在我看来，在我添加border-left之前，div必须是一个椭圆。一旦我添加它，它应该看起来像这样：

我的意思是它应该将左侧延伸到100px，而右侧仍然保持椭圆的形状，使自己成为一个不规则的图形。但实际上，它只是变成了一对半圆。为什么？

【问题讨论】：

当您将border 添加到content-box 元素时，它会将边框的宽度添加到元素宽度。在此示例中，您的 100px 元素变为 200px。 border-radius 应用于整个元素，在您的示例中，它是一个 100px 矩形，紧邻另一个 100px 元素（边框）并创建一个“完美”圆圈 - content-box 与 border-box
@justinw 但是对于第二张图片，我仍然可以说它将边框的宽度添加到元素宽度中，并且 100px 的元素变成了 200px。虽然是不规则的身材。
也许我没有正确理解，但你为什么会期待不规则的形状？边框半径正在应用于整个形状/元素，当您添加边框时是元素+它的边框。
@justinw 我想创建一个常规形状，但我不知道它为什么起作用。我认为添加 border-left 只会根据其原始形状扩展 div 的左侧。这样作为您的example，div 仍然保留右侧，同时扩展其左侧。
很抱歉，我不太明白哪里出了问题，希望其他人能提供更多帮助。

标签： css css-shapes

【解决方案1】：

我的意思是它应该将左侧延伸到100px，同时仍然保持右侧椭圆的形状，使其自身不规则

这是margin而不是border的目的：

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

&lt;div class="shape"&gt;&lt;/div&gt;

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

&lt;div class="shape"&gt;&lt;/div&gt;

这是一个动画，可以更好地看到半径的效果：

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

&lt;div class="shape"&gt;&lt;/div&gt;

有边框不会影响形状的情况。使用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;
  }
}

&lt;div class="shape"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

我制作了一个 GIF 来让你更好地理解。对于此示例，我最初删除了 border-radius 属性以消除关于“椭圆”提及的任何偏见。

所以基本上，您只是在 CSS 盒子模型中添加一些边框，然后border-radius: 50% 将其转换为圆形

https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

【讨论】：