Question

我有两个div，彼此相邻，背景颜色为白色。 http://jsfiddle.net/J5ZXt/是代码的链接。我希望两个div看起来像一个元素，所以我需要删除一部分阴影。有什么想法吗？

Answer 1

是的，有可能。只需用:before：

覆盖它

/* Add relative positioning */
#two {
  position:relative;
}
/* Add :before element to cover up shadow */
#two:before {
  background:white;
  display:block;
  content:".";
  font-size:0;
  width:4px;
  height:100px;
  position:absolute;
  left:-4px;
  top:0;
}

/* Existing styles */
#one {
  width: 100px;
  height: 100px;
  background: #FFF;
  -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  float:left;
}
#two {
  width: 100px;
  height: 300px;
  background: #FFF;
  -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  float:left;
}

<div id="one"></div>
<div id="two"></div>

Answer 2

这是我能在几分钟内获得的最好成绩，我认为它能胜任。最好的是它的简单性（对你的CSS只有3次编辑）

定位D1的阴影，使右边缘具有负值（-4px足以隐藏它）

给两个div相对定位，这样我们就可以控制它们的堆叠顺序。

给D1一个比D2更高的z指数，因此它掩盖了D2阴影的顶部。

#one {
    width: 100px;
    height: 100px;
    background: #FFF;
    -moz-box-shadow: -4px 0 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: -4px 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: -4px 0px 3px 1px rgba(0,0,0,0.3);
    float:left;
    position: relative;
    z-index: 20;
}
#two {
    width: 100px;
    height: 300px;
    background: #FFF;
    -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    float:left;
    z-index: 5;
    position: relative;
}

Answer 3

纯CSS - 没有

您可以随时尝试将div放在其上方，如此example

:: before解决方案在所有浏览器中都不起作用

Answer 4

因为我讨厌不甘示弱，往往是一个完美主义者，所以我想出了一个不依赖于#one的特定高度的答案 - 它只需要比{{1}短。（currently accepted answer的情况也是如此）。它也没有#two一侧的间隙或更大阴影的缺点。

注意： 此答案还可以通过#one提供弯角。只需将border-radius添加到border-radius:4px;即可查看结果。

jsFiddle Example

新CSS

#one:after

两个带阴影的div看起来像一个部分。 CSS中有可能吗？

4 个答案:

新CSS