如何使用 CSS 消除链接图片周围的蓝色边框?
一个没有视觉效果的网站会很枯燥，即使设计得不错，我们大多数人可能还是更喜欢带有大量图片的网站。为什么会这样?图片是提升网站用户体验的快捷方式。我们感知并发送到大脑的信息中 90% 都是视觉信息。您可以使用图片来吸引并重新聚焦访客的注意力。
在传达重要信息时，图片可能非常有用。图片是一种绝佳的情感触发器，可以用来吸引访客并让他们继续阅读您的内容。
CSS 使我们能够设置图片的样式和位置，从而创造出绝佳的视觉效果。当我们使用图片作为超链接时，一些旧版浏览器会默认显示蓝色边框。在本文中，我们将讨论如何使用 CSS 更改或消除链接图片周围的蓝色边框。
什么是链接图片?
链接图片是指添加到网页中用作超链接的图片。要创建超链接，我们需要将图片添加到 <a> 元素中。让我们在 HTML 页面中创建一个简单的超链接图片。
使用旧版浏览器添加链接图片
如果您使用旧版浏览器(例如 Internet Explorer 6-8、Firefox 7 等)将图片添加为超链接，则默认情况下图片周围会显示蓝色边框。这与超链接文本的效果类似。默认情况下，超链接文本带有蓝色下划线，并且鼠标悬停时字体颜色会突出显示。
示例
让我们使用 Internet Explorer 6 将图片添加为超链接。
<!DOCTYPE html>
<html>
<head>
<title> Linked Images </title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
img{
max-width: 50%;
height: 10%;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.cainiaomax.com/"> <img src= "https://www.cainiaomax.com/static/images/logo-color.png" alt= "tutorialspoint"> </a>
</body>
</html>
注意 - 请在 Internet Explorer 6 中运行此程序，否则，如果您使用任何其他现代浏览器，将看不到默认的蓝色边框。
如何消除超链接图片的默认行为?
可以使用两种方法消除此默认行为。一种方法是完全移除图片的边框，另一种方法是为图片添加自定义的边框样式。为了选择所有超链接图片，我们将使用 CSS 选择器。
CSS 选择器
CSS 选择器 是 CSS 规则的开头部分。它是一系列元素或其他术语，用于告知浏览器必须选择哪个元素，以便应用 CSS 属性值(在规则中指定)。 CSS 选择器使开发人员能够选择(或匹配)您想要在网页中设置样式的 HTML 元素。
选择器有多种类型。具体如下:
简单选择器 – 使用元素的名称、ID 和类来选择元素。
组合选择器 – 使用元素之间的关系(例如父子关系)来选择元素。
伪元素选择器 – 使用元素的一部分(例如 span)来选择元素。
属性选择器 – 使用元素的属性或属性值来选择元素。
CSS 选择器的一些示例包括 CSS 元素选择器、CSS 分组选择器、CSS ID 选择器、CSS 通用选择器等。
通用 CSS 选择器
CSS 星号 (*) 选择器，也称为 CSS 通用选择器，用于一次性选择或匹配整个网页的所有元素或元素的某些部分。选择后，您可以使用任何 CSS 自定义属性对其进行相应的样式设置。它可以匹配任何类型的 HTML 元素，例如 <div>、<section>、<nav>、<button> 等。它还可以用于选择和设置父元素的子元素的样式。
语法
*{
Css declarations;
}
使用父子选择器
此选择器用于匹配父元素的所有后代元素。
语法
parent child{
css declarations;
}
我们可以通过使用 CSS 父子选择器编写 border: none 来删除默认的蓝色边框样式，如下所示 –
a img{
border: none;
}
示例
让我们看一个例子 –
<!DOCTYPE html>
<html>
<head>
<title>No border linked image</title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
a img{
max-width: 50%;
height: 10%;
border: none;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.cainiaomax.com/"> <img src= "https://www.cainiaomax.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>
自定义边框样式
我们可以通过使用您自己的边框样式覆盖超链接图片的默认蓝色边框来移除它。
<!DOCTYPE html>
<html>
<head>
<title> No border linked image </title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
a img{
max-width: 50%;
height: 10%;
border: 4px dotted orange;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.cainiaomax.com/index.htm/"> <img src= "https://www.cainiaomax.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>
结论
本文讨论了旧版浏览器在超链接图片周围显示蓝色边框的问题，以及如何消除这种默认行为。然而，Chrome、Edge、Firefox 等现代浏览器默认不会在图片周围显示任何边框。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
