如何用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中文网其他相关文章！