html - 使用父级的背景颜色作为框阴影颜色

Question

我正在尝试使用插图 box-shadow 创建一个“增强型”单选按钮.

Here's a CodePen of what I got so far

我要做的是制作 .radio-button 的背景<div />用作 box-shadow 的颜色.在我当前的解决方案中，颜色设置为 #fff ，它在白色背景上有效，但在背景为灰色时无效。

• 将其设置为 currentColor将框阴影的颜色设置为 border-color值，即 #333 ;
• 将其设置为 inherit似乎禁用了框阴影，至少在 Chrome 中是这样。我猜在某种程度上是有道理的，我假设 inherit不适用于像这里这样的部分属性(property)。
• 根本不设置它默认为 color 的值, 这是黑色的。

有没有办法在没有 JavaScript 的情况下实现我想做的事情？

Answer 1

CSS 不提供对应于类似于 currentColor 的元素的计算背景颜色的特殊值(对应于 foreground 颜色；即 color — 它不应该与 border-color 对应，即使它被设置为与 color 不同的值)。

您可以通过将 color 设置为所需的背景颜色和 background-color: currentColor 以及框阴影来作弊，将标签文本放在其自己的元素中label 元素，并为该新元素指定预期的字体颜色。

---

inherit 关键字只能单独存在于 CSS 声明中。它不能用作一组值中的单个组件。这意味着虽然框阴影可以继承，但整个box-shadow 属性必须完整继承。当这种情况发生时，最终继承的是父元素的框阴影——这也不起作用，因为父元素没有框阴影。