为何140px宽元素的50%与70px border-radius渲染效果不同？

这个差异的核心原因是CSS中border-radius的百分比值计算规则和固定像素值的行为不同，具体细节如下：

• 固定像素值（如70px）：当设置border-bottom-right-radius: 70px时，该值会同时作用于水平半径（沿元素宽度方向）和垂直半径（沿元素高度方向），也就是水平、垂直方向的圆角半径均为70px。

• 百分比值（如50%）：百分比是基于元素的宽度和高度分别计算的：

  • 水平方向的半径 = 元素宽度的50% = 140px × 50% = 70px（这部分和固定值一致）
  • 垂直方向的半径 = 元素高度的50% = 150px × 50% = 75px（这部分和固定值70px存在差异）

所以你的元素中，border-bottom-left-radius: 50%实际等价于border-bottom-left-radius: 70px 75px（水平半径70px，垂直半径75px），而border-bottom-right-radius: 70px等价于border-bottom-right-radius: 70px 70px，两者垂直方向的半径差异直接导致了视觉上圆角形状的细微不同。

如果想要两个圆角完全一致，你可以采用两种方式调整：

/* 方式1：直接使用相同固定值 */
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;

/* 方式2：明确指定水平和垂直百分比，让垂直半径也等于70px */
border-bottom-left-radius: 50% 46.67%; /* 46.67% ≈ 70/150，对应垂直方向70px */
border-bottom-right-radius: 70px;

内容的提问来源于stack exchange，提问作者yazan_mohamed