如何用CSS變數實作繼承值？

如何在 CSS 變數（又稱自訂屬性）內儲存繼承值？

場景

考慮以下 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 中，不支援使用繼承關鍵字作為值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"></div>

以上是如何用CSS變數實作繼承值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！