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

Question

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

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

我要寻找的是使侧面保持笔直，并且角保持与div扩展相同，例如：

这是我的CSS当前的样子：

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

我还应该指出，我一直在寻找这个问题的答案（我想以前曾有人问过），但我一直找不到答案。我认为这可能与我选择的单词有关，但是我不确定还有其他问题要问。如果重复，请提前致歉。

Answer 1

在第一个示例中，您没有边框半径50px，因为边框半径不能超过50％ 请查看此答案以获取详细信息。 Border-radius in percentage (%) and pixels (px) or em

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

jsfiddle.net/xky4r539 /

Answer 2

这是因为for i in ret['data']['release dates']: if 'USA' in i: print(i) # USA::30 July 2017 首先对于50px来说太高了。
当它很小时起作用的原因是它被限制在它们之间侧面高度的一半处。因此，在上面的示例中，实际（结果）值约为border-radius（div高度的一半）。

当div变高时，其较小的高度不再限制18px的值，直到指定的border-radius为止。您需要使用它的大小（或测量大小），以便它适合高个子盒子。我向您保证，对于小写字母也将是正确的。

Answer 3

此处的50px边框半径太大。您可以使用20px。

<branch-point>

.card {
  margin-bottom:20px;
  background: yellow;
  padding: 10px;
  width: 80%;
  border-radius: 20px;
  position: relative;
}
.avatar {
  background: red;
  height: 50px;
  width:50px;
  border-radius:50%;
  position: absolute;
  top: -2px;
  right: -2px;
 
}

p {
 width: calc(100% - 20px);
}