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

当我们在页面中插入图像链接时，图像周围会出现一个蓝色虚线边框，这是浏览器默认的样式。有时候这个边框会影响到我们的页面显示效果，需要将其消除。

CSS 方式

使用 CSS 来消除链接图像周围的蓝色边框，只需要在样式表中添加以下代码：

a img {
    border: none;
    outline: none;
}

这段代码会将链接中的所有图像的边框和轮廓线都设置为无。

还可以针对某个链接或图像使用：

a:hover img {
    border: none;
    outline: none;
}

这段代码会针对鼠标悬停在链接上时，链接中的图像的边框和轮廓线都设置为无。

HTML5 属性方式

还可以通过 HTML5 的属性方式来消除链接图像周围的蓝色边框，只需要在链接或图像的属性中添加以下代码：

<a href="#" style="border:none;outline:none;"><img src="example.jpg"></a>

这段代码会将链接中的所有图像的边框和轮廓线都设置为无。

还可以针对某个链接或图像使用：

<a href="#"><img src="example.jpg" style="border:none;outline:none;"></a>

这段代码会将指定图像的边框和轮廓线都设置为无。

以上两种方式都可以消除链接图像周围的蓝色边框，可以根据实际需要选用。