CSS自定義屬性以--開頭

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--success-color: #28a745;
--danger-color: #dc3545;
}
.button {
background-color: var(--primary-color);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}
.card {
background-color: var(--secondary-color);
padding: 20px;
border-radius: 10px;
}
.alert {
background-color: var(--danger-color);
color: #fff;
padding: 10px 20px;
border-radius: 5px;
}

CSS自定義屬性是CSS最新的一個特性，它可以讓我們在CSS中定義一些變量，方便我們在后面的使用中直接調用這些變量，實現代碼的復用和維護。而自定義屬性以--開頭，可以定義在:root，也可以定義在其他元素中，后面使用時使用var()函數調用。

在以上代碼中，我們定義了四種不同顏色的自定義屬性，分別對應不同的場景。我們可以分別在.button，.card和.alert中使用這些變量，并自定義其他的樣式，實現快速的樣式定制。