考慮以下 CSS 程式碼：
:root {
--color: rgba(20, 20, 20, 0.5);
}
.box {
width: 50px;
height: 50px;
display: inline-block;
margin-right: 30px;
border-radius: 50%;
position: relative;
}
.red {
background: rgba(255, 0, 0, 0.5);
}
.blue {
background: rgba(0, 255, 0, 0.5);
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
transform: translateX(30px);
background: var(--color);
filter: invert(1);
}在這段程式碼中，我們使用 --color 來控制 .box 元素的偽元素的背景。然而，我們可能會遇到這樣的情況，我們希望從父 .box 元素繼承顏色。
在 CSS 中，不支援使用繼承關鍵字作為值CSS 變數。這意味著我們無法直接設定 --color 繼承來達到我們想要的效果。
為了克服這個限制，我們可以採用兩種技術：
1。使用後備值：
透過利用 CSS 變數中的後備值，我們可以告訴屬性在未明確定義 --color 的情況下使用繼承。
background: var(--color, inherit);
但是，在這種情況下，因為 --color 總是定義在根層級並繼承，所以永遠不會使用後備值。
2.使用初始值：
我們可以使用初始值來「取消定義」--color 並強制使用後備值。根據CSS規範，初始值是一個空值，它與var()有一個特殊的交互作用。
.box:before {
...
background: var(--color, inherit);
...
}
.box {
...
--color: initial;
}透過這個修改，我們可以在CSS變數中實現繼承值繼承，使我們能夠根據父元素的顏色來控制背景顏色。
<div class="box red">
以上是如何用CSS變數實作繼承值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
