Question

我有兴趣制作一个网站，其中2个不同大小的div元素可以删除阴影，但不受其他阴影的影响。

我试图在两个元素中放置相同的z-index，但最后一个优先于第一个，并且它的阴影与它重叠。

所以，正如标题所说，怎么可能呢？

编辑：我已经阅读了Two divs with shadows looks like one part. Is it possible in CSS?帖子，但这并没有解决我的问题，因为我无法移动任何像素的阴影。

Answer 1

你可以省略绿框的左侧阴影，或者排除。

.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/

两个div为白色的示例：

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

Answer 2

如果将box-shadow移动到每个框的伪元素，则可以使用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/

Answer 3

用: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>

Answer 4

尝试偏移阴影，以便将设置为z-index的绿色矩形的左侧隔离为优势。

尝试这样的事情。

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

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

Answer 5

@jcaron发表的评论解决了我的问题：

一种选择是使用第一个选项，然后在与第一个选项相同的位置添加另一个蓝色框，但没有阴影和更高的z-index。

谢谢大家的支持。

Answer 6

有一个简单的解决方案，只需使用 z-index 并将一个 div 覆盖在另一个上。您会注意到黄色和绿色之间连接处的阴影略微变厚，这是由于 div 阴影重叠造成的，据我所知（不是很远），这是不可避免的。

.a1 {
        z-index:5;
        width:50px;
        height:100px;
        box-shadow: 0 0 5px 3px black;
        position:absolute;
        top:50px;
        left:20px;
        background-color:white;
      }
      .a11 {
        z-index:10;
        width:50px;
        height:100px;
        position:absolute;
        top:50px;
        left:20px;
        background-color:yellow;
      }
      .a2 {
        z-index:8;
        width:100px;
        height:50px;
        box-shadow: 0 0 5px 3px black;
        position:absolute;
        top:100px;
        left:70px;
        background-color:green;
      }

<html>
  <body>
    <div class=a1></div>
    <div class=a11></div>
    <div class=a2></div>
  </body>
</html>

如何防止div元素受到另一个div元素的box-shadow的影响？

6 个答案: