从html元素中删除系统边框

Question

＆lt; - 我的意思是这个虚线边框（左上角显示）。

它应该是一个带链接的按钮。它看起来很棒，但是当我点击它时，浏览器会在它周围绘制一个边框。如果我从代码中删除<a>并再次点击，则不会绘制边框

CSS：

#button{
        padding: 0.5em;
        margin: 0 auto;
        border-radius: 3px;
        background-color: #B3C833;
        font-family: 'Consolas',monospace;
        font-size: 3em;
        display: inline-block;
}

HTML：

<a href="#">
    <div id="button">
        <span id="pref">http://</span><span id="addr">example.com</span>
    </div>
</a>

Answer 1

你需要添加这个属性：

a {
  outline:none;
}

Answer 2

该边框用于访问，不应删除。它允许被禁用的人员通过键盘访问您的站点，以查看焦点所在。

查看outlinenone.com

如果您不介意丢失部分流量，可以使用以下方法将其删除：

a {
  outline:none;
}