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

回答