时间戳

首页 > 解决方案 > flexbox 项目的完美圆角边界半径

css - flexbox 项目的完美圆角边界半径

问题描述

我有这样的项目，它们是 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，不是椭圆）？先感谢您！

标签： cssflexboxborder-radius

解决方案

不要分配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>

您可以查看这篇文章以了解其border-radius工作原理，并查看本文以了解如何准确border-radius计算。

推荐阅读