CSS 如何使用css文件创建圆角按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6122620/
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
How to create the rounded corner button using css file?
提问by hari
how to create rounded corner button using css file and how this css file apply in button. please give the css code for that
如何使用 css 文件创建圆角按钮以及这个 css 文件如何应用于按钮。请为此提供 css 代码
回答by Senthil Kumar Bhaskaran
use border-radiusfor IE , -moz-border-radiusfor Firefox and -webkit-border-radiusfor safari
IE使用border-radius，Firefox使用-moz -border-radius，safari 使用-webkit-border-radius
#example1 {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px; }
For Reference http://www.css3.info/preview/rounded-border/
回答by jams
Specify the corners you want:
指定所需的角：
border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;
回答by RJD22
It depends on what you mean with a button. But this is the CSS:
这取决于您对按钮的含义。但这是CSS：
.button {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
Just give your button the class button
只需给你的按钮类按钮
Here is some more info on border-radius: Border radius Css3files
这里有一些关于边界半径的更多信息： 边界半径 Css3files
回答by Fermin
回答by vishal choudhary
Use CSS border-radiusproperty to create rounded corner buttons.
使用 CSS border-radius属性创建圆角按钮。
.btn {
display: inline-block;
border: 1px solid transparent;
border-radius: 24px;
padding: 12px 32px;
text-align: center;
cursor: pointer;
font-size: 1rem;
color: #fff;
}
.btn-blue {background-color: #007bff;}
.btn-green {background-color: #28a745;}
.btn-red {background-color: #dc3545;}
.btn-grey {background-color: #6c757d;}
/* Change bg-color on mouse over */
.btn-blue:hover {background-color: #0069d9;}
.btn-green:hover {background-color: #218838;}
.btn-red:hover {background-color: #c82333;}
.btn-grey:hover {background-color: #5a6268;}<button type="button" class="btn btn-blue">Blue</button>
<button type="button" class="btn btn-green">Green</button>
<button type="button" class="btn btn-red">Red</button>
<button type="button" class="btn btn-grey">Grey</button>