如何像图中那样堆叠具有相同圆角的不同尺寸的卡片？

Question

如何在css中堆叠不同大小但具有相同圆角的卡片？例如，一张卡的宽度为 357px，高度为 422px，另一张卡的宽度为 426px，高度为 208px。 如果我给两者添加 10% 的边框半径，由于尺寸不同，它们就不具有相同的圆角。如何解决CSS中的这个问题？

Answer 1

您可以将相同的固定

border-radius

添加到两个元素，例如

border-radius: 10px;

如果您希望它具有响应能力，您可以使用

vw

或

vh

。