使用 CSS 將顏色應用於 HTML 元素

可以具有顏色的屬性

在元素級別，HTML 中的所有內容都可以應用顏色。讓我們來看看頁面上渲染的不同專案——例如文字、邊框等。我們將提供 CSS 屬性列表，這些屬性用於為每個專案應用顏色。

從根本上講，color 屬性定義 HTML 元素內容的前景色，而 background-color 屬性定義元素的背景色。這些屬性幾乎可以在任何元素上使用。

文字

每當渲染元素時，這些屬性都用於確定文字的顏色、其背景以及文字上的任何裝飾。

color

用於繪製文字和任何文字裝飾（例如新增下劃線、上劃線、刪除線等）的顏色。

background-color

文字的背景色。

text-shadow

配置應用於文字的陰影效果。陰影選項中包括陰影的基色（然後根據其他引數進行模糊和與背景混合）。請參閱文字投射陰影瞭解更多資訊。

text-decoration-color

預設文字裝飾（如下劃線、刪除線等）的顏色是 currentColor。此關鍵字表示 color 屬性的當前值。但是，您可以使用 text-decoration-color 屬性覆蓋該值併為它們使用不同的顏色。

text-emphasis-color

在文字中每個字元旁邊繪製強調符號時使用的顏色。這主要用於繪製東亞語言的文字。

caret-color

在元素內繪製插入符號（有時稱為文字輸入游標）時使用的顏色。這僅在可編輯的元素中有效，例如 <input> 和 <textarea>，或者其 HTML contenteditable 屬性設定為 true 的元素。

盒子

每個元素都是一個包含某種內容的盒子，除了盒子可能包含的任何內容外，它還有一個背景和邊框。

邊框

請參閱邊框部分，瞭解可用於設定盒子邊框顏色的 CSS 屬性列表。

background-color

在元素中沒有前景色內容的區域使用的背景色。

box-shadow

配置盒子上的內陰影和投射陰影效果。每個陰影的選項中包括陰影的基色（然後根據其他引數進行模糊和與任何背景混合）。

column-rule-color

在使用 CSS 多列布局時，用於繪製分隔文字列的線的顏色。

outline-color

用於在元素外部繪製輪廓的顏色。此輪廓與邊框不同，因為它在文件中不佔用空間。輪廓不參與盒子模型，而是覆蓋其他內容。輪廓通常用作焦點指示器，指示當前哪個元素具有焦點並將接收鍵盤輸入事件。

邊框

任何元素都可以繪製邊框。基本的元素邊框是圍繞元素內容邊緣繪製的一條線。請參閱盒子模型瞭解元素與其邊框之間的關係，並參閱文章使用 CSS 樣式化邊框瞭解更多關於應用樣式到邊框的資訊。

您可以使用 border 簡寫屬性，它允許您一次性配置邊框的所有內容（包括邊框的非顏色特性，例如其寬度、樣式（實線、虛線等）等）。

border-color 簡寫

指定用於元素邊框每一側的單一顏色。

border-left-color、border-right-color、border-top-color 和 border-bottom-color

允許您設定元素邊框相應側的顏色。

border-block-start-color 和 border-block-end-color

透過這些屬性，您可以設定用於繪製邊框所圍繞的塊的起始和結束邊緣的顏色。在從左到右的書寫模式（例如英語的書寫方式）中，塊起始邊框是頂部邊緣，塊結束邊框是底部。這與行內起始和結束不同，行內起始和結束是左右邊緣（對應於盒子中每行文字的開始和結束位置）。

border-inline-start-color 和 border-inline-end-color

這些屬性允許您為盒子中文字行起始和結束的邊緣著色。這取決於 writing-mode、direction 和 text-orientation 屬性，這些屬性通常（但不總是）用於根據所顯示的語言調整文字方向性。例如，如果盒子的文字是從右到左渲染的，那麼 border-inline-start-color 將應用於邊框的右側。

在樣式表中將顏色指定為值

既然您知道哪些 CSS 屬性允許您為元素應用顏色，您就可以開始為您的網站新增顏色了。讓我們來看一些在樣式表中使用顏色的例子。在這個例子中，我們使用了幾個前面提到的屬性，無論屬性是什麼，在 CSS 中應用顏色的概念都是相同的。

讓我們先看看結果，然後再檢視建立它所需的程式碼

HTML

建立上述示例的 HTML 程式碼如下所示

<div class="wrapper">
  <div class="boxLeft">
    <p>This is the first box.</p>
  </div>
  <div class="boxRight">
    <p>This is the second box.</p>
  </div>
</div>

這裡有一個包裝器 <div>，其中包含兩個子 <div>，每個子 <div> 都有一個子段落 (<p>)。每個內容 <div> 都被賦予了不同的外觀和感覺。

CSS

讓我們分段看看建立上述結果的 CSS 程式碼。

.wrapper {
  height: 110px;
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt",
    "Zapfino",
    cursive;
  border: 6px solid mediumturquoise;
}

div {
  flex: 1;
}

.wrapper 類用於為包含所有其他內容的 <div> 分配樣式。這透過 height 建立容器的高度，允許此塊級元素的寬度預設為其父級的 100%。將 display 設定為 flex 並新增一個 10px 的 gap 會建立一個 flex 容器，使子元素並排佈局，並在所有容器的子元素之間留有間隙。我們使用 flex 讓 flex 子元素增長以填充容器；它不影響 flex 容器本身。

我們在此討論中更感興趣的是使用 border 屬性在元素的外部邊緣建立邊框。此邊框是一條實線，寬 6 畫素，顏色為 命名顏色 mediumturquoise。

在我們的包裝器中，我們有一個左盒子和一個右盒子。

.boxLeft {
  background-color: rgb(245 130 130);
  outline: 2px solid darkred;
}

用於樣式化左側盒子的 .boxLeft 類設定了背景和輪廓的顏色

• 盒子的背景色透過使用 rgb() 函式符號將 CSS background-color 屬性的值更改為 rgb(245 130 130) 來設定。
• 為盒子定義了一個輪廓。與更常用的 border 不同，outline 完全不影響佈局；它會在元素盒子外部的任何內容之上繪製，而不是像 border 那樣留出空間。這個輪廓是一條兩畫素厚的實心深紅色線條。請注意在指定顏色時使用了 darkred 關鍵字。
• 請注意，我們沒有明確設定文字顏色。這意味著 color 的值將從定義它的最近包含元素繼承。預設情況下，它是黑色。

.boxRight {
  background-color: hwb(270deg 63% 13%);
  outline: 4px dashed #6e1478;
  color: hsl(0deg 95% 95%);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-decoration: underline wavy #8f8;
  text-shadow: 2px 2px 3px black;
}

最後，.boxRight 類設定了右側盒子的幾種樣式。然後建立以下顏色（使用五種不同的宣告顏色值的方式）

• background-color 使用 hwb() 函式符號設定 — hwb(270deg 63% 13%)。這是一種中紫色。
• 盒子的 outline 用於指定盒子應由四畫素厚的虛線圍住，其顏色使用六位<hex-color> #6e1478 略深一點的紫色。
• 前景（文字）顏色透過使用 hsl() 函式符號設定 color 屬性來指定 — hsl(0deg 95% 95%)。這是一種非常淺的粉紅色。
• 我們使用 text-decoration 簡寫以及用於瀏覽器相容性的完整元件，在文字下方添加了一條綠色波浪線。我們使用了三位<hex-color> #8f8，它等同於 #88ff88。
• 最後，使用 text-shadow 為文字添加了一點陰影。它的 color 引數設定為 black，一個<named-color> 值。

我們使用了五種不同的顏色語法來演示其可能性。在實際中，您和您的團隊最好選擇一種首選的顏色表示法，所有從事程式碼庫工作的人員都使用相同的顏色語法。

使用顏色的其他方式

CSS 並不是唯一支援顏色的 Web 技術。其他示例包括

HTML Canvas API

允許您在 <canvas> 元素中繪製 2D 點陣圖圖形。請參閱我們的 Canvas 教程以瞭解更多資訊。

SVG（可伸縮向量圖形）

允許您使用繪製特定形狀、圖案和線條的命令建立影像。SVG 命令格式為 XML，可以直接嵌入網頁中，也可以使用 <img> 元素放置在頁面中，就像任何其他型別的影像一樣。

WebGL

Web Graphics Library 是一個基於 OpenGL ES 的 API，用於在 Web 上繪製高效能 2D 和 3D 圖形。請參閱我們的 WebGL 教程瞭解更多資訊。另請參閱 WebGPU，它是 WebGL 的繼任者，適用於現代 GPU。

另見

• <color> 資料型別
• CSS 顏色值指南
• 明智地使用顏色
• CSS 顏色模組
• 繪製圖形