Javascript 圆形按钮的制作方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8446286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make round buttons
提问by Cecil Rodriguez
How would I make round buttons using HTML and CSS? I tried to use a background image, and make it a certain size, but that doesn't seem to work. Specifically, I would like to make a circular button, which on a click would launch a Javascript script.
如何使用 HTML 和 CSS 制作圆形按钮？我尝试使用背景图像，并将其设置为特定大小，但这似乎不起作用。具体来说，我想制作一个圆形按钮，点击它会启动一个 Javascript 脚本。
回答by Andreas Eriksson
With border-radius.
与border-radius.
button {
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #000;
}
回答by Kevin Anthony Oppegaard Rose
You can do this quite simply with css3:
您可以使用 css3 非常简单地做到这一点：
HTML -
HTML -
<div id="button">
</div>
CSS -
CSS -
#button {
width:100px;
height: 100px;
border-radius:100%;
background-color:red;
}
And use an onclicked event to make it a button.
并使用 onclicked 事件使其成为按钮。
回答by Alfabravo
Two ways:
两种方式：
1.) Create images with rounded corners and set the inbetween with css colors.
1.) 创建带有圆角的图像并使用 css 颜色设置中间。
2.) Use css properties which are limited to some browsers (FF use a set, safari some others, not sure if chrome use yet another set).
2.) 使用仅限于某些浏览器的 css 属性（FF 使用一组，safari 使用其他一些，不确定 chrome 是否使用另一组）。
Check this list
检查这个列表
