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

问题描述

| 如何使用css文件创建圆角按钮，以及如何在按钮中应用此css文件。 请为此提供CSS代码     

解决方法

对于IE使用border-radius，对于Firefox使用-moz-border-radius，对于safari使用-webkit-border-radius

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

供参考http://www.css3.info/preview/rounded-border/     ,指定所需的角：

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

边界半径：使用CSS创建圆角！     ,这取决于您使用按钮的含义。但这是CSS：

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

只需给您的按钮上课按钮 这是有关border-radius的更多信息： 边框半径Css3files     ,使用border-radius CSS属性进行设置。 看到这里演示     ,使用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>