如何防止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影响？

回答

相关问题