css - Flexbox 元素的完美圆形边框半径

Question

我有类似这样的元素，它们是 flex 盒容器内的 flex 元素。

我的正常尺寸商品:

我的元素被挤压:

我的 CSS 看起来像这样:

body { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  align-items: flex-start;
  justify-content:space-between;
  width: 100%;
  position:relative;
}

.item {
 display: inline-flex;
 align-items: flex-end;
 justify-content: center;
 flex: 1 0;
 height: 2.4rem;
 border: 1px solid #000;
 border-radius: 0 0 50% 50%; /* Important part */
 padding-bottom: 10px; 
 user-select: none;
 font-size: 0.9rem;
 height: 250px; 
 margin: 0 5px;
}
.info {
  margin-top: 150px;
}

<div class='container'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item'>3</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>

有没有办法让它们在每种尺寸下看起来都是完美的圆形(RadiusX == RadiusY，而不是椭圆形)？ 预先感谢您!

Answer 1

不要将 50% 分配给 border-radius，它会根据宽度和高度的百分比精确计算(在这种情况下，40px /80px)。如果宽度和高度不相等，则会形成椭圆形。

只需使用任意大数字即可。

您不需要精确计算它的数字，只需将其设置为大于宽度或高度即可(在本例中，500px 对于 160px 来说已经足够了 高度，但不要太着迷):

div {
  width: 80px;
  height: 160px;
  display: inline-block;
  margin-right: 10px;
}

.fifty-percent {
  border-radius: 0 0 50% 50%;
  background-color: salmon;
}

.big-number {
  border-radius: 0 0 500px 500px;
  background-color: steelblue;
}

<div class="fifty-percent">50%</div>
<div class="big-number">500px</div>

您可以看到this article查看 border-radius 的工作原理和 this article查看border-radius的精确计算方式。