如何使用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.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、class来选择元素。
组合选择器 - 通过它们之间的关系（例如父子）来选择元素。
伪元素选择器 - 选择元素的一部分（例如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.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>