Question

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

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

我尝试使用border-radius属性在CSS上使用圆角，但它们仍然保持清晰：

#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。感谢

Answer 1

你忘记了分号（;）。变化：

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

为：

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

另外，我建议添加：

-webkit-border-radius: 5px;

以获得更好的跨浏览器兼容性。

Answer 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 code：

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

Answer 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;
}

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

3 个答案: