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

Question

我遇到了这个奇怪的问题，我似乎无法解决这个问题，而且我不确定为什么会出现在这里。

我正在尝试设计我的表单按钮的样式，并且在样式化后我有一个奇怪的轮廓，我没有在其中编码 /image/BqT8W.jpg

这是代码:

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

您需要在按钮中设置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