如何点击鼠标时移除锚点标签（a标签）的box-shadow效果？

算力阿峰

2026-5-28

求助：点击超链接后box-shadow一直保留着

我遇到个头疼的问题：点击任意超链接后，box-shadow仍会保留，不会消失。

我原本写这段CSS是为了给用Tab键切换焦点的链接加高亮阴影：

a:focus { box-shadow: 0 0 3px 7px green; }

用Tab键切换焦点的时候这个效果完全正常，但麻烦的是，点击任意超链接时也会触发这个box-shadow效果，而且点击之后阴影就一直留在那里，这不是我想要的表现。

下面是我完整的代码：

CSS代码

a:link { color: darkblue; } 
a:visited { color: grey; } 
a:focus { box-shadow: 0 0 3px 7px green; } 
a:hover { background-color: black; color: white; } 
a:active { background-color: blue; color: white; }

HTML代码

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/> 
<h2>Anchor tag</h2> 
<a href="http://www.google.com">Visit our HTML Page</a> 
<p>&nbsp;</p> 
<h2>Anchor tag with i tag</h2> 
<a href="http://www.google.com" target="_blank"> 
<i> Visit our HTML Page </i> 
</a> 
<p>&nbsp;</p> 
<h2>Anchor tag with span tag</h2> 
<a href="http://www.google.com" target="_blank"> 
<span> Visit our HTML Page </span> 
</a> 
<p>&nbsp;</p> 
<h2>Anchor tag with img icon</h2> 
<a href="http://www.google.com" target="_blank"> 
<img src="data:image/png;base64,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" alt="icon" width="36" height="36"> 
</a> 
<p>&nbsp;</p> 
<h2>Anchor tag with fontawesome icon</h2> 
<a href="http://www.google.com" target="_blank"> 
<i class="fas fa-user"></i> 
</a> 
<p>&nbsp;</p>

内容的提问来源于stack exchange，提问作者Sandy

如何点击鼠标时移除锚点标签（a标签）的box-shadow效果？

CSS代码 #

HTML代码 #

CSS代码

HTML代码