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

Question

Button outline picture

它出现在我将box-shadow添加到btn的时候，但是当我拿走它时并没有消失。

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

<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>

Answer 1

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

.btn:focus { 
    outline: none; 
} 

Answer 2

您需要在您的.btn class增加一个风格类似如下：

.btn { 

     outline:none; 

} 

---