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

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

问题不在于你没有把这个 boder 编码进去，而是你没有把它编码出来。浏览器有一组默认样式，这就是您所看到的。这里的默认值看起来像 border: 3px outset #ccc 但你不想要那个。

只需添加 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;
  vertical-align: middle;
  border: none;
}
button:hover {
  background: #28597a;
  color: #ffffff;
}

<button>Submit</button>

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
}

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

Strange border with gradient around submit button. How do I remove?

html

css

button