Question

我需要一个看起来像这样的按钮： Required Button Shape

但是我的按钮的高度和宽度以百分比表示。据我所知，做到这一点的唯一方法是将边框半径设为宽度的一半（以像素为单位），并且由于我按钮的宽度基于父级尺寸的百分比，因此我无法获得确切的值。将边界半径设置为50％会产生可怕的形状。 Button with 50% border radius

我带有JavaScript，但它需要一个事件：

function BorderRadius()
{
    var x=document.getElementsByClassName("LoginButton");
    x[0].style.borderRadius = (x[0].offsetHeight/2).toString()+"px";
}

是否有任何方法可以自动调用此JavaScript函数或任何其他解决方案，最好使用CSS或JavaScript。

Answer 1

尽管您需要在几种不同的浏览器中对此进行测试，但是将border-radius设置为大于按钮高度会为您提供所需的圆角，至少在Firefox中是这样。< / p>

div {
  position: relative;
  height: 300px;
}
button {
  width:33%;
  height:10%;
  border-radius: 999px;
}

<div>
<button>Hello</button>
</div>

一种替代方法可能是使用视口单位而不是百分比。可以将其与calc()和px值结合使用，以提供最小尺寸。

视口单位：

button {
  width: calc(100px + 15vw);
  height: calc(20px + 5vw);
  border-radius: calc(10px + 2.5vw);
}

<button>Button</button>

Answer 2

只需将border-radius设置为固定值，然后将line-height添加相同的数字即可。

button {
  border-radius: 20px;
  line-height: 20px;
  background: #ccc;
}

<button>Test button</button>

Answer 3

到目前为止，肉瘤的答案似乎是最好的解决方案。不过，还有另一种方法。我刚刚在正文中添加了onload =“ BorderRadius（）”。它立即调用该函数并设置形状。

如何在html中将按钮制作成具有扁平边的椭圆形？

3 个答案: