正确地围绕元素的角落

Question

当我使用border-radius来绕过div的角落时，它的角落行为不当，看起来很奇怪。结果看起来像this

我怎样才能正确地绕过角落？

Answer 1

这个问题很简单，我传递的值是％而不是px。

div {
height: 50px;
width: 100px;
margin-bottom: 20px;
}

.pixels {
border-radius: 15%;
background: firebrick;
}

.percentages {
border-radius: 15px;
background: seagreen;
}

<div class="pixels"></div>
<div class="percentages"></div>

将％中的值传递到border-radius使得按钮看起来是椭圆形的，而不是使角落更平滑。