如何使用css文件创建圆角按钮？答案

【问题标题】：How to create the rounded corner button using css file?如何使用css文件创建圆角按钮？
【发布时间】：2020-07-11 21:04:09
【问题描述】：

如何使用 css 文件创建圆角按钮以及此 css 文件如何应用于按钮。请给出css代码

【问题讨论】：

这个解决方案对我有用 "codeproject.com/Questions/383627/…"

标签： asp.net css

【解决方案1】：

border-radius 用于 IE，-moz-border-radius 用于 Firefox，-webkit-border-radius 用于 safari p>

#example1 {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px; }

供参考http://www.css3.info/preview/rounded-border/

【讨论】：

【解决方案2】：

指定你想要的角：

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Border-radius: create rounded corners with CSS!

【讨论】：

【解决方案3】：

这取决于您对按钮的含义。但这是 CSS：

.button {
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

只需给你的按钮类按钮

以下是有关边界半径的更多信息： Border radius Css3files

【讨论】：

【解决方案4】：

使用border-radius CSS 属性进行设置。

见here for demo

【讨论】：

【解决方案5】：

使用 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>

【讨论】：

【解决方案6】：

我认为这个答案要简单得多。

这是使用的以下代码：

<html>
<style>
.btn {
    border-radius: 5px 5px 5px 5px;
    padding: 2px 2px;
    background-color: DarkOliveGreen;
}
</style>
<a href="http://google.com" class="btn">test</a>
<html>

这个按钮是一个带有内边距和边框半径的超链接。更简单

【讨论】：

如果对您有帮助，请发表评论