HTML按鈕上的便攜式圓角

我有一個簡單的HTML按鈕，可以包裝到div中。我知道這些按鈕可能在不同的瀏覽器上呈現不同的效果。HTML按鈕上的便攜式圓角

<div id="but_begin"><button type="button" id="but2_begin">Go</button></div>

我已經設置按鈕（使用JQuery）下面的CSS：

$("#but2_begin").css({ 
    backgroundColor: "yellow", 
    width:50 
});

，並呈現如下：

enter image description here

我想擺脫它周圍的陰影並使角落變圓。現在，當我閱讀網絡上關於按鈕佈局和圓角的所有信息時，我感到有些害怕。它似乎並沒有收斂。

我的問題：如何以便攜方式在HTML按鈕上設置圓角？這是可能的只有CSS？或者我應該使用圖書館？或者我應該使用不同的HTML標籤或方法？

2012-03-19 JVerstry

具體來說，您需要支持哪些瀏覽器？並有商業原因。支持IE6甚至7可以說近來沒什麼意義。如果你想讓它成爲真正的便攜式使用圖像。 – mrtsherman 2012-03-19 20:39:00

我喜歡這裏的答案：http://stackoverflow.com/questions/1648870/what-rounded-corner-approach-should-i-take – j08691 2012-03-19 20:39:50

要刪除「陰影」設置「border：none;」在你的按鈕CSS。圓角需要CCS3，因此在 Turnip 2012-03-19 20:42:34

您應該使用CSS3以便攜方式生成圓角和文本陰影。 http://css3generator.com/是一個很好的工具，可以幫助你做到這一點。

越來越多的瀏覽器支持CSS3，主流瀏覽器（如最新版本的Chrome，IE，Safari，Opera和Firefox）覆蓋了90％以上的用戶。

例如，來自http://css3generator.com/的這段代碼可靠地在多種瀏覽器中創建圓角邊框。

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px;

2012-03-19 20:40:10 dangerChihuahua007

您正在談論的「陰影」ID按鈕的邊框。設置爲border:none;，它不見了。您可以使用純CSS來做圓角，但只有當它確定時，舊版瀏覽器纔會渲染它。只有那些支持CSS3的新版本才能繞過角落。

.rounded-corners { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px; 
}

2012-03-19 20:42:42

回答