問題陳述：
創建動態顏色陰影以類似Sass 的方式使用CSS 變數來實現懸停、焦點和活動狀態darken() 函數。
解決方案：
CSS 顏色模組級別 4 規範引入了“相對顏色語法”，它可以使用算術運算來操作顏色。這允許創建如下顏色陰影：
:root {
--color-primary: #f00; /* any format you want here */
--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}
.button {
background: var(--color-primary);
}
.button:hover,
.button:focus {
background: var(--color-primary-darker);
}
.button:active {
background: var(--color-primary-darkest);
}在此程式碼中：
透過調整calc() 表達式中的百分比，您可以產生各種色調的基底色。這種方法提供了與 Sass 的 darken() 函數類似的功能，但使用純 CSS 語法。
以上是如何僅使用 CSS 變數來建立像 Sass 的「darken()」函數一樣的 CSS 顏色陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
