如何制作圆形按钮

如何使用HTML和CSS制作圆形按钮？我试图使用背景图片，并使其具有一定的尺寸，但这似乎不起作用。具体来说，我想制作一个圆形按钮，点击一下就会启动一个Javascript脚本。如何制作圆形按钮

两种方式：

1.）创建带圆角的图像，并设置与css颜色的中间。

2.）使用限于某些浏览器的CSS属性（FF使用一组，其他一些Safari，不知道如果铬使用另一组）。

2011-12-09 13:44:01 Alfabravo

随着border-radius。

button { 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    border: 1px solid #000; 
}

2011-12-09 13:44:36

哪些浏览器？你能具体吗？ –

使用border-radius可能会更好; 50％;而不是以像素为单位对其进行硬编码。这样，您可以在不考虑边界半径的情况下更改尺寸。例如：http：//jsfiddle.net/BfjAK/2/ – Munter

有关边界半径浏览器支持的信息：http://www.quirksmode.org/css/contents.html#t45 –

你可以用CSS3做到这一点很简单：

HTML -

<div id="button"> 
</div>

CSS -

#button { 
    width:100px; 
    height: 100px; 
    border-radius:100%; 
    background-color:red; 
}

，并使用onclicked事件使它是一个按钮。

2011-12-09 13:48:40

'border-radius：50％;'应该这样做。此外，标记可以是''，而css是'按钮{0} {0} {0} {0} {0} height：100px; border-radius：50％; background-color：red; border：1px solid＃000; }' –

回答