完美圆润的 flexbox 项目的 border-radius

Question

我有这样的项目，它们是 flexbox 容器中的弹性项目。

我的正常尺寸商品：

我的物品被挤压：

我的 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 to see how border-radius works and this article 以了解 border-radius 的精确计算方式。

完美圆润的 flexbox 项目的 border-radius

Perfectly rouded border-radius for flexbox items

css

flexbox

border-radius