Html 圆角、矩形按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15037133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rounded corner, rectangle buttons
提问by Harrison Howard
I am interested in making an html button similar to the ones found on the homepage of https://new.myspace.com/. I know that the html would look like this:
我有兴趣制作一个类似于https://new.myspace.com/主页上的按钮的 html 按钮。我知道 html 看起来像这样：
<button class="button" id="join">Join</button>
Although I'm not sure on what the css should look like. I know there are many tutorials online about html buttons, but I'm not sure about semi-rectangular ones. Thanks, Harrison
虽然我不确定 css 应该是什么样子。我知道网上有很多关于 html 按钮的教程，但我不确定半矩形按钮。谢谢，哈里森
回答by martriay
Use border-radius. The exact code in that example is border-radius: 4px;https://developer.mozilla.org/en-US/docs/CSS/border-radius
使用边界半径。该示例中的确切代码是border-radius: 4px;https://developer.mozilla.org/en-US/docs/CSS/border-radius
Following Jake's good advices, use this catch-all-browser rules:
遵循 Jake 的好建议，使用这个包罗万象的浏览器规则：
button#join {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
回答by Bernie
Try:
尝试：
<button class="button" id="join">Join</button>
Css:
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;
}
Adjust the amount of pixels the border radius property is in order to change how much it is rounded.
调整边框半径属性的像素数量，以改变它的圆角程度。
Edit: apparently the website you posted uses 4px (code adjusted)
编辑：显然您发布的网站使用 4px（代码调整）
Second edit: Adjustments made to the code to make larger buttons and to effect all buttons.
第二次编辑：对代码进行调整以制作更大的按钮并影响所有按钮。
回答by MikeB
Here's a little info on border-radius: http://www.css3.info/preview/rounded-border/
这是关于边界半径的一些信息：http: //www.css3.info/preview/rounded-border/
And here's a cool little generator to make things easy: http://border-radius.com/
这是一个很酷的小生成器，可以让事情变得简单：http: //border-radius.com/
