首頁 > 文章 > web前端 > 如何使用 CSS 設定圖示顏色、大小和陰影的樣式

如何使用 CSS 設定圖示顏色、大小和陰影的樣式

王林轉載: 2023-09-15 21:53:02839瀏覽

如何使用 CSS 设置图标颜色、大小和阴影的样式

圖示是任何網站或應用程式的重要組成部分，因為它們為我們提供了一種快速、簡單的方式讓用戶理解內容並與之互動。但是，使用預設圖示會使網站看起來很普通且沒有吸引力。使用 CSS，我們可以設定圖示顏色、大小和陰影的樣式，以創建獨特且視覺吸引力的使用者體驗。

在本文中，我們將學習如何使用 CSS 設定圖示顏色、大小和陰影的樣式。我們將學習在 CSS 中設定圖示樣式的不同方法。

CSS 中圖示樣式的不同方法

方法1：使用Font Awesome圖示

設計圖示樣式的第一種方法是使用 font Awesome Icons，這是一種流行的圖示字體，它提供了可使用 CSS 自訂的可擴展向量圖示庫。 Font Awesome 圖示可以使用不同的顏色、大小和陰影，以與網站的設計相符。

Font Awesome 圖示的使用非常簡單。首先，我們需要在 HTML 文件中包含 Font Awesome 樣式表，方法是在 head 部分添加以下程式碼 -

<link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

包含 Font Awesome 樣式表後，我們現在可以使用帶有相關類別的 i 標籤在 HTML 文件中使用任何 Font Awesome 圖示。有關更多詳細信息，請參閱以下語法 -

文法

以下語法定義 i 元素的顏色和文字陰影。 元素由表示 HTML 圖示的類別組成。

.icon-1 {
   color: red;
   text-shadow: 2px 2px 2px orange;
}
<div class="icon-1">
   <i class="fa fa-html5" aria-hidden="true"></i>
</div>

範例

在下面的範例中，我們將 HTML5、CSS3 和 Github 圖示的顏色分別改為紅色、藍色和黑色。同時，所有圖示的大小設定為10em，每個圖示中的文字陰影分別為橙色、天藍色和灰色。

<html>
<head>
   <title>Font Awesome icons styling using CSS</title>
   <link rel="stylesheet" href=
   "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .icon-1 {
         color: red;
         text-shadow: 2px 2px 2px orange;
      }
      .icon-2 {
         color: blue;
         text-shadow: 2px 2px 2px skyblue;
      }
      .icon-3 {
         color: black;
         text-shadow: 2px 2px 2px gray;
      }      
      .fa { font-size: 10em;}
   </style>
</head>
<body>
   <h2>Styling Font Awesome Icons using CSS</h2>
   <div class="icon-1">
      <i class="fa fa-html5" aria-hidden="true"></i>
   </div>
   <div class="icon-2">
      <i class="fa fa-css3" aria-hidden="true"></i>
   </div>
   <div class="icon-3">
      <i class="fa fa-github" aria-hidden="true"></i>
   </div>
</body>
</html>

方法2：使用CSS圖示

CSS 圖示是向網站新增圖示的另一種方法。 CSS 圖示是使用 CSS 屬性（如邊框半徑、框架陰影和漸層）建立的，以建立類似圖示的形狀。 CSS 圖示是輕量級的，易於自訂，並且可以縮放到任何尺寸。

文法

下面的語法示範如何建立 CSS 圖標，並在其中使用 before 或 after 偽元素並添加相關的 CSS 屬性。

.icon {
   position: relative;
   width: 50px;
   height: 40px;
   background-color: lightgreen;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}		
.icon:before {
   content: "";
   position: absolute;
   top: 5px;
   left: 5px;
   width: 40px;
   height: 30px;
   background-color: green;
   box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}	
<div class="icon"></div>

範例

在下面的範例中，我們新增了三個不同形狀、大小和顏色的不同圖示。 CSS 圖示的顏色設定為淺藍色、淺紅色和淺綠色。我們也定義了圖示的大小和不同顏色的框陰影。

<html>
<head>
   <title>CSS icons styling using CSS</title>
   <style>
      .container {
         display: flex;
         gap: 10px;
         align-items: center
      }
      .icon-1 {
         position: relative;
         width: 50px;
         height: 50px;
         background-color: lightblue;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-1:before {
         content: "";
         position: absolute;
         top: 5px;
         left: 5px;
         width: 40px;
         height: 40px;
         background-color: blue;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-2 {
         position: relative;
         width: 50px;
         height: 50px;
         border-radius: 50px;
         background-color: lightgreen;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-2:before {
         content: "";
         position: absolute;
         top: 5px;
         left: 5px;
         width: 40px;
         height: 40px;
         border-radius: 50px;
         background-color: green;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-3 {
         position: relative;
         width: 50px;
         height: 40px;
         background-color: lightred;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
      .icon-3:before {
         content: "";
         position: absolute;
         top: 5px;
         left: 5px;
         width: 40px;
         height: 30px;
         background-color: red;
         box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
      }
   </style>
</head>
<body>
   <h2>CSS icons styling using CSS</h2>
   <div class="container">
      <div class="icon-1"></div>
      <div class="icon-2"></div>
      <div class="icon-3"></div>
   </div>
</body>
</html>

方法 3：使用 SVG 圖示

SVG（可縮放向量圖）圖示是另一種為網站新增圖示的流行方式。 SVG 圖示是基於向量的，這意味著它們可以縮放到任何尺寸而不會損失品質。可以使用 CSS 對其進行自訂，以更改其顏色、大小和陰影。

要將 SVG 圖示新增至您的網站，您首先需要找到要使用的 SVG 圖示。您可以在 Font Awesome 等網站上找到 SVG 圖標，也可以使用 Adobe Illustrator 或 Inkscape 等向量編輯軟體製作自己的圖標。

文法

以下語法定義 svg 元素的填滿、高度和寬度以及篩選器。我們為 svg 圖示定義了不同的顏色、大小和陰影。

svg {
   fill: green;
   width: 50px;
   height: 50px;
   filter: drop-shadow(2px 2px 2px orange);
}
<svg>...</svg>

範例

在下面的範例中，我們使用內聯 SVG 程式碼來顯示搜尋圖標，並使用 CSS 來設定其顏色、大小和陰影的樣式。這裡，fill屬性用於將圖示的顏色變更為紅色，width和height屬性用於將圖示的大小增加到50px，filter屬性用於為圖示新增陰影。

<html>
<head>
   <title>SVG Icon styling using CSS</title>
   <style>
      svg {
         fill: green;
         width: 50px;
         height: 50px;
         filter: drop-shadow(2px 2px 2px orange);
      }
   </style>
</head>
<body>
   <h2>SVG Icon styling using CSS</h2>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none"/>
      <path d="M16.007 4c-3.308 0-6 2.692-6 6 0 .463.052.912.142 1.346l-7.264 7.264a1.5 1.5 0 0 0 2.122 2.122l7.264-7.264A5.933 5.933 0 0 0 16.007 16c3.308 0 6-2.692 6-6s-2.692-6-6-6zm0 10a3.999 3.999 0 0 1-3.998-3.98c0-2.209 1.79-3.998 3.998-3.998s3.998 1.79 3.998 3.998c0 2.209-1.79 3.98-3.998 3.98z"/>
   </svg>
</body>
</html>

結論

使用 CSS 設計圖示顏色、大小和陰影是一種非常簡單的方法，可以為我們的網站或應用程式提供自訂外觀。我們可以使用 Font Awesome、SVG 圖標或 CSS 圖標，透過它們我們可以創建與我們網站的設計相匹配的獨特且具有視覺吸引力的圖標。

以上是如何使用 CSS 設定圖示顏色、大小和陰影的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html Filter 样式表伪元素 github

陳述：

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

上一篇：使用 CSS 傳回所選元素的屬性值下一篇：使用 CSS 傳回所選元素的屬性值

看更多