javascript - 如何在 html 中制作一个椭圆形的按钮？

Question

我需要一个如下所示的按钮: Required Button Shape

但是我的 Button 的高度和宽度是百分比。据我所知，唯一的方法是将 border-radius 设置为宽度的一半(以像素为单位指定)，并且由于我的按钮宽度是基于父尺寸的百分比，所以我不是确切的值。将 border-radius 设置为 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 设置为大于按钮高度会给您提供您正在寻找的圆 Angular ，至少它在 Firefox 中执行。

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

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

替代方法可能是使用视口(viewport)单位而不是百分比。这可以与 calc() 和 px 值结合使用以获得最小尺寸。

视口(viewport)单位:

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

<button>Button</button>