融合具有透明背景和框阴影的重叠元素答案

【问题标题】：fuse overlapping elements with transparent background and box shadow融合具有透明背景和框阴影的重叠元素
【发布时间】：2011-12-25 21:22:12
【问题描述】：

我试图让两个元素对齐并融合——就好像它们是一个元素一样——通常我会将它们重叠一点，它们很容易看起来像一个元素，但我使用的元素都有一个部分透明的背景，所以重叠看起来很有趣——它会比其他背景更暗，你会很清楚地看到盒子阴影

我已经尝试完美地排列我的元素，但你仍然会看到一些阴影出现——我也使用负数作为盒子阴影上的传播值，但这并不理想，因为我只需要部分元素没有阴影，如一侧的一半，而不是一侧的全部......

我找了一圈也没找到，有人有想法吗？

编辑：

我对画布元素知之甚少，但是有没有办法使用画布来做这样的事情，比如在画布上绘制一个复杂的形状并将其放在内容下方？

【问题讨论】：

将.main div 放入一个带有overflow: hidden 的div 可以隐藏.main div 底部阴影。但是，恐怕无法隐藏.bottomdiv的顶部阴影（与.maindiv相交的部分）
这是我的假设，谢谢

【解决方案1】：

这是我的尝试：http://jsfiddle.net/Simo990/YxRWp/4/

刚刚删除了负边距和顶部阴影。这不是你想要的，但是……希望你喜欢。

【讨论】：

【解决方案2】：

这样的？

【讨论】：