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

Question

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

这是我目前得到的 CodePen

我想要做的是将 的背景.radio-button <div />用作box-shadow. 在我当前的解决方案中，颜色设置为#fff，它适用于白色背景，但不适用于灰色背景。

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

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

Answer 1

CSS 不提供对应于元素的计算背景颜色的特殊值，类似于currentColor（对应于前景色；也就是说，即使将其设置为不同的值，color它也不应该对应border-color于color）。

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

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