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>