CSS自定義屬性是一種讓開發者可以創建自己的CSS屬性的方法。它可以讓我們在樣式表中定義自己的屬性，并在HTML中使用它們來修改樣式，大大提高了CSS的靈活性。

定義自定義CSS屬性非常簡單，只需要使用雙中括號定義屬性名即可：

:root {
--primary-color: #FF0000;
}

在這個例子中，我們定義了一個名為primary-color的自定義CSS屬性，并將它的值設置為紅色。在HTML中，我們可以使用var()函數來調用這個屬性：

.button {
background-color: var(--primary-color);
}

這樣，.button類的背景顏色將會被設置為紅色。

自定義CSS屬性還可以應用在其他的CSS屬性中，例如：

.button {
--button-color: #FFFFFF;
background-color: var(--button-color, var(--primary-color));
border: 1px solid var(--button-color);
}

在這個例子中，我們定義了一個名為button-color的自定義CSS屬性，并將它的值設置為白色。在背景顏色和邊框顏色中，我們使用了var()函數來調用這個屬性。如果這個屬性沒有定義，那么將使用primary-color的值作為默認值來替代。

在使用自定義CSS屬性時，一些瀏覽器可能不支持使用var()函數，所以我們應該通過提供備用的樣式來回退到使用標準CSS。例如：

.button {
/* 為不支持var()函數的瀏覽器提供備用樣式 */
background-color: #FF0000;
/* 使用自定義CSS屬性 */
background-color: var(--button-color);
}

總的來說，使用自定義CSS屬性可以使我們的代碼更加模塊化和可維護。定義和調用自定義CSS屬性也非常方便和簡單，希望開發者可以多多嘗試使用。