html按钮上的便携式圆角

Question

我有一个简单的html按钮，我将其包装到div中。我知道这些按钮在不同的浏览器上可能会有不同的呈现方式。

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

我在按钮上设置了以下CSS（使用JQuery）：

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

它呈现如下：

我想摆脱周围的阴影，让角落变圆。现在，当我阅读网上关于按钮布局和圆角的所有信息时，我有点害怕。它似乎根本没有收敛。

我的问题：如何以便携方式在HTML按钮上设置圆角？这只能用CSS吗？或者我应该使用图书馆？或者我应该使用不同的HTML标记或方法吗？

Answer 1

您正在谈论的“影子”会隐藏按钮的边框。设置border:none;，它就消失了。 你可以用纯CSS做圆角，但只有当它没问题时，旧的浏览器才能渲染它。只有支持CSS3的新版本才能绕过角落。

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

Answer 2

您应该使用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;