CSS自定義屬性是CSS3引入的新特性，它允許Web開發者在代碼中定義自己的CSS屬性。 這些屬性可以被重復使用，可以被引用或繼承，極大地簡化了CSS代碼的編寫。在本文中，我們將一步步演示如何使用CSS自定義屬性。
首先，我們需要定義一個自定義屬性，我們可以使用以下語法：

:root {
--my-variable: blue;
}

在這個例子中，我們定義了一個名為“--my-variable”的自定義屬性，它的值被設置為“藍色”。我們將這個屬性放在:root偽類（或者html）的選擇器中，來確保這個自定義屬性被全局使用。
現在，我們可以在頁面中的其他地方使用這個自定義屬性，并設置它的值。例如：

p {
color: var(--my-variable);
}

在這個例子中，我們使用var()函數來引用我們定義的自定義屬性--my-variable。這將使所有的段落元素的顏色都被設置為“藍色”。
我們還可以在定義自定義屬性時使用其他值類型，例如：

:root {
--font-size: 16px;
--line-height: 1.5;
--border-width: 2px;
}

在這個例子中，我們分別定義了自定義屬性--font-size、--line-height和--border-width。--font-size的值為“16px”，--line-height的值為“1.5”，--border-width的值為“2px”。
我們也可以在CSS規則中，結合使用多個自定義屬性，例如：

:root {
--primary-color: blue;
--secondary-color: red;
}
button {
background-color: var(--primary-color);
color: var(--secondary-color);
}

在這個例子中，我們定義了兩個自定義屬性--primary-color和--secondary-color。在button元素的CSS規則中，我們的自定義變量被用于設置背景顏色和文本顏色，并引用這兩個自定義屬性。
CSS自定義屬性不僅可以被用于聲明和引用常量，還可以用于管理主題、動態計算和響應式設計。這些功能的實現需要使用更高級的技術和組件，超出了本文的范圍。
總結一下，CSS自定義屬性是一項功能強大的特性，它可以提高CSS代碼的可維護性和靈活性。通過使用自定義屬性，我們能夠使代碼更緊湊、更靈活，因此在Web開發中極為實用。