html - 如何在高度变化时保持边界半径形状

Question

我为我的 div 分配了 50px 的边框半径，以实现以下结果：

但是，当 div 的高度发生变化时，边框的曲率也会发生变化

我正在寻找的是边保持笔直，边角保持与 div 扩展相同，如下所示：

这是我的css目前的样子：

.card {
    border-radius: 50px;
    height: 100%;
}

我还应该注意，我一直在寻找这个问题的答案（我假设以前有人问过），但我一直找不到答案。我认为这可能与我选择的词语有关，但我不确定如何问这个问题。如果它是重复的，请提前道歉。

标签： htmlcss

Answer 1

在您的第一个示例中，您没有边框半径 50 像素，因为边框半径不能超过 50%，请参阅此答案了解详细信息。 以百分比 (%) 和像素 (px) 或 em 表示的边框半径

因此，要使 2 个框相同，只需使用右边框半径值 - 例如 20px。

jsfiddle.net/xky4r539/