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

我试图通过使用插入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不适用于像这里这样的属性的部分。
未将其设置为默认值，而是将其设置为值为color，该值为黑色。

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

来源

2016-01-20 Kris Selbekk

但是，如果阴影是颜色与背景相同，它不会显示。我必须在这里失去了一些东西。 – vals

@vals - 我想避免让单选按钮关心其父项的背景颜色 - 因此，框阴影必须从其父项的背景颜色继承。 –

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

您可以通过设置color到所需的背景色和background-color: currentColor与箱子的影子一起，把标签文本在自己的元素label元素中，并赋予新的元素预期的字体颜色作弊。

的inherit关键字可以通过自身在CSS声明中只存在。它不能用作一组值中的单个组件。这意味着虽然盒子阴影可以继承，但整个box-shadow属性必须全部继承。当发生这种情况时，最终继承的是父元素的方块阴影 - 由于父元素没有方块阴影，所以无法工作。

来源

2016-01-20 18:19:50 BoltClock

好，也许我没有正确地阅读元素的结构（它晚了），但'currentColor'的差异可能是由于currentColor是如何计算父对子元素和继承的。 – BoltClock

谢谢，很好的答案 - 尽管不是我所希望的。我会尝试以另一种方式创建我正在制作的内容:) –

我还是不完全明白你想做什么...

可能是这样的事情？

.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); 
 
}

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

来源

2016-01-20 20:39:27 vals

好方法 - 但这是我最终做的：http://codepen.io/selbekk/pen/jWYrzB?editors=110 –

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

回答

相关问题