如何使用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://tutorialspoint.tw/"> <img src= "https://tutorialspoint.tw/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元素，例如`

`、`
`、`
廣告