使用父級的背景顏色作爲方塊陰影顏色

我試圖通過使用插入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 –

使用父級的背景顏色作爲方塊陰影顏色

回答

相關問題