为什么我的按钮有这个轮廓？ CSS

Question

https://msdn.microsoft.com/library/dn255001%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

当我向btn添加了box-shadow时出现但是当我把它拿走时它并没有消失。

＆＃13;

＆＃13;

.btn {
  width: 70px;
  height: 70px;
  color: #EEEEEE;
  margin-top: 4px;
  background-color: #6c608c;
  -webkit-background-clip: padding-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -o-transition: background-color .2s ease-in;
  -moz-transition: background-color .2s ease-in;
  -webkit-transition: background-color .2s ease-in;
  transition: background-color .2s ease-in;
}

＆＃13;

<div class="col span_1_of_3">
  <img src="images/icon.png"></img>
  <h1>SPACECRAFT</h1>
  <button href="/index.html" class="btn">home</button>
  <button href="members/index.html" class="btn">members</button></br>
  <button href="studios/index.html" class="btn">studios</button>
  <button href="contact/index.html" class="btn">contact</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

按钮对象使用outline值表示它具有焦点。这对键盘用户来说实际上非常重要。但如果你想摆脱它，那么你需要做这样的事情：

.btn:focus {
  outline: none;
}

Answer 2

您需要在.btn class中再添加一个样式，如下所示：

.btn {

      outline:none;

}