Question

我正在尝试使用插入box-shadow来创建“增强型”单选按钮。

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

将其设置为currentColor会将框阴影的颜色设置为border-color值#333;
将其设置为inherit似乎会禁用框阴影，至少在Chrome中是这样。从某种意义上来说，我猜是有道理的，我假设inherit对于像这里的财产部分不起作用。
根本不设置它默认为color的值，即黑色。

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

Answer 1

CSS不提供与类似currentColor的元素的计算背景颜色对应的特殊值（对应于前景颜色;即color - 它不应与border-color相对应，即使它设置为与color不同的值。

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

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

Answer 2

我仍然不完全明白你想做什么......

可能是这样的吗？

＆＃13;

.test {
  width: 60px;
  height: 60px;
  border: solid 2px black;
  border-radius: 100%;
  margin: 10px;
  display: inline-block;
  background: radial-gradient(circle, white 10px, transparent 30px);
  box-shadow: 2px 2px 6px 0px black;
}

body {
  background-image: linear-gradient(to right, red 90px, green 90px, green 180px, blue 120px);
}

＆＃13;

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

＆＃13;

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

2 个答案: