Question

我有这个奇怪的问题，我似乎无法解决这个问题，我不确定它为什么会在这里。

我正在尝试设置表单按钮的样式，在设计样式时，我有这个奇怪的轮廓，我没有编写代码 http://imgur.com/QpCPRju

以下是代码：

button {
  background: #3e779d;
  padding: 12.5px 25px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  color: white;
  font-size: 18px;
  text-decoration: none;
  vertical-align: middle
}
button:hover {
  background: #28597a;
  color: #ffffff;
}

任何人都可以了解为什么会发生这种情况。

谢谢

巨大的编辑：谢谢大家。我错过了一个半冒号，所以代码不适合我。以下所有答案都是正确的（这是一个标志，你不应该在屏幕前花这么长时间）

Answer 1

这是默认的按钮边框。您可以使用

删除它

button
{
    border: none;
}

使用CSS演示：http://jsfiddle.net/c76mkcaq/

Answer 2

您需要在按钮中设置border:none;。

button {
  background: #3e779d;
  padding: 12.5px 25px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  color: white;
  font-size: 18px;
  text-decoration: none;
  border:none;
  vertical-align: middle
}

<强> JSFIDDLE DEMO

Answer 3

边框可能来自浏览器的默认样式。如果您未使用normalize.css（您应该使用）重置，则可以使用以下内容重置它：

button {
  border: 0 none;
  outline: 0 none;
}

如果这还没有解决，您可以使用Chrome开发者工具之类的东西来找出样式的来源。只需右键单击该按钮，然后选择检查元素。然后，您可以在开发人员工具窗格中看到应用于右侧的所有CSS选择器。

Answer 4

问题不在于你没有编写这个版本的代码，而是你没有编写它的代码。浏览器有一组默认的样式，这是你所看到的。此处的默认设置看起来像是border: 3px outset #ccc，但您并不想要它。

只需添加border: none;，您的最终代码如下所示：

＆＃13;

button {
  background: #3e779d;
  padding: 12.5px 25px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  color: white;
  font-size: 18px;
  text-decoration: none;
  vertical-align: middle;
  border: none;
}
button:hover {
  background: #28597a;
  color: #ffffff;
}

＆＃13;

<button>Submit</button>

＆＃13;

Answer 5

如果你不想冒险，并摧毁边界的每一个机会;更新为了清晰，欢迎你们。 （考虑所有情况）

button { 
  border: none; // traditional fix
  border: 0px !important; // if you got something weird goin on
  outline: 0px; // if you got something really weird goin on
}

并

button:hover, button:active, button:focus { /* styling for any way a link is about to be used */ border: none; // traditional fix border: 0px !important; // if you got something weird goin on outline: 0px; // if you got something really weird goin on }

奇怪的边框与渐变周围提交按钮。我该如何删除？

5 个答案: