如何用CSS实现不同尺寸卡片的相同圆角堆叠？

核心问题原因 #

用百分比设置border-radius时，圆角的计算逻辑是：水平方向圆角取元素宽度的百分比，垂直方向取高度的百分比。这就导致宽高比不同的卡片，哪怕设置相同百分比，视觉圆角弧度会差异明显——比如你提到的窄高卡片（357×422）和宽扁卡片（426×208），10%的圆角会让前者垂直方向圆角更大，后者水平方向圆角更大，堆叠时视觉不协调。

解决方案 #

1. 使用固定像素值（最直接方案）

给所有卡片设置相同的固定像素border-radius，不管卡片尺寸如何，圆角绝对大小完全一致，堆叠时视觉效果统一。

示例代码：

.card-1 {
  width: 357px;
  height: 422px;
  border-radius: 36px; /* 固定圆角大小，可按需调整 */
}

.card-2 {
  width: 426px;
  height: 208px;
  border-radius: 36px; /* 和card-1保持一致 */
}

2. 结合min()函数兼顾自适应与统一

如果希望圆角能随卡片尺寸自适应，但又不想差异过大，可用min()函数限制圆角的最大绝对大小，同时保留百分比的自适应特性：

.card {
  border-radius: min(10%, 36px);
}

这个方案会在卡片尺寸较大时用百分比自适应，尺寸较小时用固定值兜底，确保圆角不会过大或过小，同时维持不同卡片间的视觉一致性。

3. 基于最小边的动态计算

若想让圆角比例相对统一，可基于卡片的最小边（宽或高中的较小值）计算圆角。用CSS的min()函数获取最小边，再设置百分比：

.card {
  border-radius: calc(min(var(--card-width), var(--card-height)) * 0.1);
}

使用时给每个卡片定义对应CSS变量：

.card-1 {
  --card-width: 357px;
  --card-height: 422px;
  width: var(--card-width);
  height: var(--card-height);
}

.card-2 {
  --card-width: 426px;
  --card-height: 208px;
  width: var(--card-width);
  height: var(--card-height);
}

这种方式让所有卡片的圆角比例基于各自最小边，视觉弧度更接近统一。

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