如何使用 CSS 消除链接图像周围的蓝色边框？

当您向图像添加超链接时，一些旧浏览器会通过自动在图像周围添加蓝色边框来呈现超链接图像。此行为类似于使用蓝色下划线和字体颜色来突出显示超链接文本。尽管大多数现代浏览器（如 Chrome、Edge、Firefox 等）默认情况下不会在图像周围显示任何边框。

对于上下文，这是 Internet Explorer 呈现超链接图像的方式：

方法：我们可以通过定义我们自己的边框或使用 css 完全删除它来删除此默认行为。我们可以使用 css 类或 id 选择特定图像，要选择所有超链接图像，我们将使用父子 css 选择器。要了解有关 css 语法和选择器的更多信息，请阅读此内容。您可以使用选择器“a img”选择所有超链接图像，这会选择 标记内的所有 。

方法1：一种方法是定义我们自己的边框，以便我们覆盖默认的边框。我们将在样式表中添加以下内容以更改所有超链接图像。

句法：

a img {
    border: 4px dashed darkgreen;
}

HTML

  

    
    

  

    
Hyperlinked image
     
     
    
Non linked image
    

  

输出：

自定义边框

方法 2：删除默认样式。

我们可以使用以下任何一种 CSS 样式删除超链接图像的默认浏览器样式。

句法：

a img {
    border: none;
    /* border-width: 0; */
    /* border-style: none; */
}

HTML

  

    
    

  

    
Hyperlinked image
     
         
    
    
Non linked image
 
    

  

输出：

删除了默认样式