如何製作圓形按鈕

如何使用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; }' –

回答