圆角，矩形按钮答案

【问题标题】：Rounded corner, rectangle buttons圆角，矩形按钮
【发布时间】：2013-02-23 04:41:38
【问题描述】：

我有兴趣制作一个类似于https://new.myspace.com/ 主页上的html 按钮。我知道 html 看起来像这样：

 <button class="button" id="join">Join</button>

虽然我不确定 css 应该是什么样子。我知道网上有很多关于 html 按钮的教程，但我不确定半矩形按钮。谢谢，哈里森

【问题讨论】：

标签： html css button

【解决方案1】：

使用边框半径。该示例中的确切代码是border-radius: 4px; https://developer.mozilla.org/en-US/docs/CSS/border-radius

遵循 Jake 的好建议，使用这个包罗万象的浏览器规则：

button#join {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

【讨论】：

但我如何将它应用到按钮上？
去css添加input[type='button']{border-radius:4px;}
另外，添加 -moz-border-radius:4px; 和 -webkit-border-radius:4px; 以在所有浏览器上工作。
标准名称 (border-radius) 应该出现在特定于供应商的版本之后。此外，-webkit-border-radius 通常不再需要。最后，特定于供应商的前缀应以 - 开头。
编辑，但在以前的 chrome 或 safari 版本中不需要 -webkit？

【解决方案2】：

试试：

<button class="button" id="join">Join</button>

CSS：

.button {
    /*adjust the roundness*/
    border-radius: 4px;
    moz-border-radius: 4px;
    webkit-border-radius: 4px;
    /*adjust height and width*/
    height: 20px;
    width: 20px; 
    /*change border colour*/
    border:1px #245ec6 solid;
}

调整边框半径属性的像素数量，以改变它的圆角程度。

编辑：显然您发布的网站使用 4px（代码调整）

第二次编辑：对代码进行调整以制作更大的按钮并影响所有按钮。

【讨论】：

如何让按钮自己变大？
@HarrisonHoward，你是指宽度还是高度？使您的代码如下所示：（相应地更改 enter_height_here 和 enter_width_here：input[type='button']{border-radius: 4px; moz-border-radius: 4px; webkit-border-radius: 4px;height: enter_height_here; width: enter_width_here;}
@Bernie，您可以一起摆脱 id 并在您的情况下使用 input[type='button']{}' or button{}`。使代码更干净
@Jake 好的，我正在使用：.buttons{border-radius:4px; moz-边界半径：4px； webkit-border-radius：4px；高度：自动；宽度：自动；填充：15px；背景颜色：#245ec6； } 但我不确定如何让灰色背景消失
我觉得用id更干净，如果他想让所有的按钮都生效，就用class吧。

【解决方案3】：

这里有一些关于边界半径的信息：http://www.css3.info/preview/rounded-border/

这是一个很酷的小生成器，可以让事情变得简单：http://border-radius.com/

【讨论】：