两个带阴影的 div 看起来像一个部分。在 CSS 中可以吗？答案

【问题标题】：Two divs with shadows looks like one part. Is it possible in CSS?两个带阴影的 div 看起来像一个部分。在 CSS 中可以吗？
【发布时间】：2012-05-24 09:33:55
【问题描述】：

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

【问题讨论】：

您可以将它们包装在父 div 中并在其上放置阴影。
遮蔽胶带 :) jsfiddle.net/J5ZXt/1
@HeitorChang hahaha 那是魔术胶带:)
@Vukasin，我发布了另一个没有间隙或依赖于#one 的静态高度的答案。

标签： css

【解决方案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>

【讨论】：

【解决方案2】：

这是我能在几分钟内得到的最好结果，我认为它可以完成这项工作。最好的是它的简单性（您的 css 只需 3 次编辑）

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

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

给 D1 一个比 D2 更高的 z-index，这样它就可以掩盖 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;
}

【讨论】：

这个答案最适合 div #one 的非像素高度！非常感谢。
这个答案有两个问题。第一个，非常微不足道（并且很容易修复）的问题是指定的box-shadows 彼此不同。其次，阴影之间（在角落，它们之间）有一个间隙，#one的左侧有一个较大的阴影。
抱歉，我急着出门忘记编辑供应商特定的 CSS。现在已经编辑了我的帖子。但是，它仍然不依赖于尝试将某些东西放在“顶部”——我认为这是最后的手段，只有在绝对必要时才使用：stackoverflow.com/questions/4015263/…。此外，通过调整阴影，我确信它可以完美渲染。正如我所说，我急于离开家，所以刚刚发布了一个概念证明以开始使用；）

【解决方案3】：

纯 CSS - 没有

您总是可以尝试在其上方绝对放置一个 div，例如 example

::before 解决方案不适用于所有浏览器

【讨论】：

+1 打败了我！正如@HeitorChang 所说，胶带 :)
@jacktheripper、:before和:after比box-shadow有更好的浏览器支持（即支持box-shadow的浏览器很可能支持:before和:after，但反之不支持)。

【解决方案4】：

因为我讨厌被超越并且倾向于成为一个完美主义者，所以我想出了一个不依赖于 #one 的特定高度的答案——它必须比 #two 短（即currently accepted answer 也是如此）。在#one 的一侧也没有缺口或较大阴影的缺点。

注意： 这个答案还通过border-radius 提供了弯角的可能性。只需将border-radius:4px; 添加到#one:after 即可查看结果。

jsFiddle Example

新的 CSS

<style type="text/css">
#one {
    width: 100px;
    height: 200px;
    background: #fff;
    float:left;
    position:relative;
    overflow:hidden;
}
#one:after {
    display:block;
    content:".";
    font-size:0;
    color:transparent;
    height:8px;
    width:100%;
    padding-left:4px;
    position:absolute;
    bottom:-4px;
    left:-4px;
    background:#fff;
    z-index:2;
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3);
}
#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;
}
</style>

【讨论】：