如何使一个按钮在html形状的椭圆形与平边？
如何使一个按钮在html形状的椭圆形与平边？
提问于 2018-09-23 09:47:02
我需要一个看起来像这样的按钮：所需按钮形状
然而，我的按钮的高度和宽度是百分比。尽我所能找到的唯一方法是边框半径为宽度的一半(以像素为单位)，并且由于我的按钮的宽度是基于父级尺寸的百分比，所以我没有精确的值。50%的边框半径会造成很糟糕的形状。边框半径为50%的按钮
我附带了一个JavaScript，但它需要一个事件：
function BorderRadius()
{
var x=document.getElementsByClassName("LoginButton");
x[0].style.borderRadius = (x[0].offsetHeight/2).toString()+"px";
}是否有任何方法自动调用此JavaScript函数或任何其他解决方案，最好使用CSS或JavaScript。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-23 10:07:31
尽管您需要在几个不同的浏览器中测试这一点，将border-radius设置为大于按钮高度将为您提供您正在寻找的圆角，至少在火狐中是这样的。
div {
position: relative;
height: 300px;
}
button {
width:33%;
height:10%;
border-radius: 999px;
}<div>
<button>Hello</button>
</div>
另一种选择可能是使用Viewport单元而不是百分比。这可以与calc()和px值相结合，为您提供最小的大小。
视口单位：
button {
width: calc(100px + 15vw);
height: calc(20px + 5vw);
border-radius: calc(10px + 2.5vw);
}<button>Button</button>
Stack Overflow用户
发布于 2018-09-23 09:50:45
只需将border-radius设置为固定值，并添加相同数字的line-height即可。
button {
border-radius: 20px;
line-height: 20px;
background: #ccc;
}<button>Test button</button>
Stack Overflow用户
发布于 2018-09-23 10:22:33
肉瘤的答案似乎是目前为止最好的解决方案。不过，还有另外一种方法。我只是在主体中添加了onload="BorderRadius()“。它立即调用函数并设置形状。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52464923
复制相关文章
相似问题
腾讯云开发者
