无法在 HTML 表单提交按钮上获得圆角？答案

【问题标题】：Can't get rounded corners on HTML form submit button?无法在 HTML 表单提交按钮上获得圆角？
【发布时间】：2017-11-07 11:40:46
【问题描述】：

我在 HTML 文档中有一个表单的提交按钮，如下所示：

<form id = "submit" method="get" action="">
    <input type="submit" name="action" value="Download" id="dlbutton"/>
</form>

我尝试使用 CSS 使用border-radius 属性在其上获得圆角，但它们仍然保持锐利：

#dlbutton{
    background:#223445;
    color:#FFFFFF ;
    border: 1px solid #223445;
    border-radius: 18px 
    -moz-border-radius: 5px 
    display:inline-block;
    width: 20em;
    height: 5em;
    -webkit-font-smoothing: antialiased;
}

我在另一个页面上有另一个按钮，它的样式完全相同并且有圆角，除了在 html 中，按钮是这样的：

<p><button class="clickable" id="clickable">Click me</button></p>

我正在使用最新的 Firefox。谢谢

【问题讨论】：

标签： html css

【解决方案1】：

您忘记了分号 (;)。变化：

border-radius: 18px
-moz-border-radius: 5px

到：

border-radius: 18px;
-moz-border-radius: 5px;

另外，我建议添加：

-webkit-border-radius: 5px;

为了更好的跨浏览器兼容性。

【讨论】：

@guts 不会这么说。我们都必须从某个地方开始！ :)

【解决方案2】：

希望这些链接对您有所帮助，请检查它们：

按钮示例：

CSS 代码：

// FIRST STYLE THE BUTTON
input#bigbutton {
width:500px;
background: #3e9cbf; // the colour of the button
padding: 8px 14px 10px; // apply some padding inside the button
border:1px solid #3e9cbf; // required or the default border for the browser will appear
cursor:pointer; // forces the cursor to change to a hand when the button is hovered
// Style the text
font-size:1.5em;
font-family:Oswald, sans-serif; 
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); // give the text a shadow 
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
// SET THE BUTTON'S HOVER AND FOCUS STATES
input#bigbutton:hover, input#bigbutton:focus {
color:#dfe7ea;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}

HTML 代码：

<input id="bigbutton" type="submit" value="Big Button That Needs Clicking" />

【讨论】：

老实说，这个答案可能会减少 90%。试着让它更短更简洁。
我知道，我只是想出了一个例子。

【解决方案3】：

我只想指出，这三个都做同样的事情，但在不同的浏览器上，所以你可以将它们设置为相同的参数：

-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;

因此您可以将它们按如下方式添加到您的代码中：

#dlbutton {
  background:#223445;
  color:#FFFFFF ;
  border: 1px solid #223445;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  display:inline-block;
  width: 20em;
  height: 5em;
  -webkit-font-smoothing: antialiased;
}

【讨论】：