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

百变鹏仔 3个月前 (09-20) #CSS

文章标签边框

没有视觉效果的网站很无聊，即使它有很好的设计，我们大多数人也可能更喜欢有很多图形的网站。为什么会这样呢？图像是增强网站用户体验的一种快速、简单的方法。我们感知并发送到大脑的信息 90% 是视觉信息。您可以使用图像来吸引注意力并重新集中访问者的注意力。

在传达重要信息时，它们可能非常有帮助。图像是一种奇妙的情感触发因素，您可以用它来吸引访问者并让他们继续阅读您的内容。

CSS 使我们能够对这些图像进行样式设置和定位，从而创造出奇妙的视觉效果。当我们使用图像作为超链接时，一些旧的浏览器会以默认的蓝色边框显示它。在本文中，我们将讨论如何使用 CSS 更改或消除链接图像周围的蓝色边框。

什么是链接图像？

链接图像是添加到网页中用作超链接的图像。为了创建超链接，我们需要在元素中添加图像。让我们在 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.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.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 元素，如、、、等，它还可以用于选择父元素的子元素并为其设置样式。

语法

*{   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.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.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.tutorialspoint.com/index.htm/"> <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "Tutorialspoint"> </a></body></html>

结论

在本文中，我们讨论了在超链接图像周围显示蓝色边框的旧浏览器以及消除默认行为的方法。然而，Chrome、Edge、Firefox 等现代浏览器默认情况下不会在图像周围显示任何边框。

文章推荐

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

什么是链接图像？

使用旧浏览器添加链接图像

示例

如何消除超链接图像的默认行为？

CSS 选择器

通用 CSS 选择器

语法

使用父子选择器

语法

示例

自定义边框样式

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写