如何防止div元素受另一個div元素的box-shadow影響？

我有興趣製作一個網站，其中2個不同大小的元素放置一個影子，但不受其他影子的影響。如何防止div元素受另一個div元素的box-shadow影響？

我試圖把同樣的z-index的兩個元素，但在第一個，最後一個具有優先權和它的影子重疊了。

因此，正如標題所說，它是如何做到的？

編輯：我看了Two divs with shadows looks like one part. Is it possible in CSS?職位，但因爲我不能移動的影子任何像素不解決我的問題。

2016-07-19 Davdriver

一個選項是使用第一個選項，然後在與第一個選項相同的位置添加另一個藍色框，但沒有陰影和更高的z-index。 – jcaron

[兩個帶陰影的div看起來像是一個部分。這是可能的CSS？]（http://stackoverflow.com/questions/10625025/two-divs-with-shadows-looks-like-one-part-is-it-possible-in-css） – showdev

你是什麼意思是「我無法移動任何像素的陰影」？ – showdev

通過@jcaron提出解決我的問題的評論：

一種選擇是使用第一個選項，然後在與第一個選項相同的位置添加另一個藍色框，但沒有陰影和較高的z-index。

謝謝大家的支持。

來源

2016-07-19 23:31:51 Davdriver

嘗試抵消了陰影，所以你隔離綠色矩形的左側設置在其z-index要優越。

嘗試類似這樣的東西。

box-shadow: 10px 0px 0px 10px #888888;

Codepen： http://codepen.io/danielsinger/pen/grvJGw

來源

2016-07-19 23:13:45

我提到的帖子解釋瞭如何去抵消陰影，但我無法抵消它們。我正在尋找替代品。 – Davdriver

你可以只省略綠框的左側陰影，或排序的。

.div2 { 
    background:#B1FA00; 
    width:200px; 
    height:50px; 
    float:left; 
    box-shadow: 0 0 0 gray, 
     0 0 0 transparent, 8px 8px 15px gray; 
}

例子：

https://jsfiddle.net/b1483vuk/1/

例與白色兩種申報單：

https://jsfiddle.net/b1483vuk/2/

來源

2016-07-19 23:17:18 HaukurHaf

看起來確實不錯，但是如果兩個div元素都具有相同的顏色（例如白色），仍然可以看到陰影，因此它不能解決我的問題，對不起 – Davdriver

嗯。我只是用第二個jsfiddle更新了我的答案，其中兩個div都是白色的。似乎在我的機器（Chrome）上正常工作。我只需要將影子的偏移量向右調整兩個像素即可。 – HaukurHaf

我正在使用Firefox，它使用比Chrome更大的陰影，這可能是解釋。 – Davdriver

如果移動箱陰影，以每盒僞元素，你可以使用定位z-index的兩個框背後的僞元素。

的CSS看起來像：

div { 
    position: relative; 
} 

div:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    box-shadow: 0 0 12px black; 
    z-index: -1; 
}

它可能不會在你的情況下工作，但下面撥弄說明了這一點：

https://jsfiddle.net/adrianlynch/16r8bp5a/

來源

2016-07-20 05:29:40

與:before掩蓋它作爲@ 0b10011說：

<style type="text/css"> 
 
#two { 
 
    position:relative; /* Add relative positioning */ 
 
} 
 
/* Add :before element to cover up shadow */ 
 
#two:before { 
 
    background:white; 
 
    display:block; 
 
    content:"."; 
 
    font-size:0; 
 
    width:4px; /* Width of Shadow */ 
 
    height:100px; /* Height of #one */ 
 
    position:absolute; 
 
    left:-4px; /* 0 - Width of Shadow */ 
 
    top:0; 
 
} 
 
</style>

來源

2016-07-20 16:06:18

但陰影盒在哪裏？ – Davdriver

把它放在兩個div元素中 –

如何防止div元素受另一個div元素的box-shadow影響？

回答

相關問題