我有类似这样的项目，它们是弹性盒容器内的弹性项目。
我的正常尺寸物品：
我的物品被挤压：
我的 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，而不是椭圆形）？
先感谢您！
不分配50% to 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>
你可以看到本文 https://css-tricks.com/almanac/properties/b/border-radius/看看如何border-radius作品和本文 https://www.codementor.io/tips/1314923785/border-radius-in-percentage-and-pixel-px看看具体如何border-radius被计算。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
