有阴影的两个div看起来像一个部分。在CSS中是可能的吗？ [英] Two divs with shadows looks like one part. Is it possible in CSS?

问题描述

我有两个div，旁边的背景颜色是白色的。 http://jsfiddle.net/J5ZXt/ 是指向代码的链接。我想让两个div看起来像一个元素，所以我需要删除阴影的一部分。任何想法？

解决方案

这是我在几分钟内可以得到的最好的，我认为它做的工作。最好的是它的简单性（只有3次编辑你的CSS）

位置D1的阴影，所以右边缘有一个负值（-4px足以隐藏它） / p>

为两个div提供相对定位，以便我们可以控制其堆叠顺序。

D2，所以它掩盖了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; 
} 
  

I have two divs next to the each other which background color is white. http://jsfiddle.net/J5ZXt/ is link to code. I want that two divs look like one element, so I need to remove a part of shadow. Any ideas?

解决方案

This is the best I could get within a couple of minutes, I think it does the job. The best thing is its simplicity (only 3 edits to your css)

Position D1's shadow so the right edge has a negative value (-4px is enough to hide it)

Give both divs relative positioning so we can control their stacking order.

Give D1 a higher z-index than D2 so it masks the top part of D2's shadow.

#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看起来像一个部分。在CSS中是可能的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！