首頁 >web前端 >css教學 >如何使用 CSS 消除連結圖片周圍的藍色邊框？

如何使用 CSS 消除連結圖片周圍的藍色邊框？

WBOY轉載: 2023-08-27 17:13:111652瀏覽

如何使用 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 消除連結圖片周圍的藍色邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 CSS 為元素添加陰影下一篇：使用 CSS 為元素添加陰影

看更多