边界半径css问题与百分比

Question

我试图制作圆形边框但不能。

这是我要实施的图片。

无视背景。

这是我已经完成的css代码。

padding: 10px 25px;
background: #777777;
border-radius:50% 50%;

但结果如下。

任何帮助都会受到赞赏。

Answer 1

可能的重复评论表明问题，但没有给出任何解决方案。

使用1em将边框半径设置为等于应用于元素的基本字体大小。

我建议你给5-6 ems的值。在这种情况下，它将持续到任何最短的一方达到50％然后将变得无效。

＆＃13;

＆＃13;

.btn {
  border: 0;
  background: #ddd;
  border-radius: 6em;
  padding: 8px 12px;
  margin: 5px;
}

＆＃13;

<button type="button" class="btn">Button 1</button>
<button type="button" class="btn">Button 2</button>
<button type="button" class="btn">Button 3</button>
<button type="button" class="btn">Button 4</button>

＆＃13;

＆＃13;

＆＃13;