Css 非重叠角盒阴影

在下面的示例中，如何创建不重叠的长方体阴影

As SO希望我提供更多细节：您的目标是为元素

.top

和

.side

创建框阴影，而不更改不重叠的标记（如果可能）

编辑：两个框阴影的模糊半径必须大于0

编辑2：“非重叠”表示在这种情况下，两个阴影不会落在另一个元素中

编辑3：更多解释请参见精彩图片

代码：

.wrapper所有{
左侧填充：50px；
}
.包装面{
左边距：-50px；
左：50px；
}
.顶{
位置：相对位置；
背景色：#fff；
高度：20px；
-webkit盒阴影：0px 5px 0px rgba（0,0,0,1）；
-moz盒阴影：0px 5px 5px 0px rgba（0,0,0,1）；
长方体阴影：0px 5px 0px rgba（0,0,0,1）；
}
h2，
p{
文本缩进：15px；
}
.这边{
位置：固定；
宽度：50px；
身高：100%；
背景色：#fff；
-webkit盒阴影：5px 0px 5px 0px rgba（0,0,0,1）；
-moz盒阴影：5px0px5px0pxrgba（0,0,0,1）；
盒影：5px0px5px0pxrgba（0,0,0,1）；
}

我的影子在左边重叠。不酷

祝你今天愉快！：）

如果我理解正确，我想这就是你想要的？ 只需删除位置：相对于上div

.wrapper所有{
左侧填充：50px；
}
.包装面{
左边距：-50px；
左：50px；
}
.顶{
背景色：#fff；
高度：20px；
-网络工具包盒阴影：0px 5px 0px rgba（0,0,0,1）；
-moz盒阴影：0px 5px 5px 0px rgba（0,0,0,1）；
盒影：0px 5px 0px rgba（0,0,0,1）；
}
h2，p{
文本缩进：15px；
}
.这边{
位置：固定；
宽度：50px；
身高：100%；
背景色：#fff；
-网络工具包盒阴影：5px 0px 5px 0px rgba（0,0,0,1）；
-moz盒阴影：5px0px5px0pxrgba（0,0,0,1）；
盒影：5px0px5px0pxrgba（0,0,0,1）；
}

我的影子在左边重叠。不酷。

如果我理解正确，我想这就是你想要的？ 只需删除位置：相对于上div

.wrapper所有{
左侧填充：50px；
}
.包装面{
左边距：-50px；
左：50px；
}
.顶{
背景色：#fff；
高度：20px；
-网络工具包盒阴影：0px 5px 0px rgba（0,0,0,1）；
-moz盒阴影：0px 5px 5px 0px rgba（0,0,0,1）；
盒影：0px 5px 0px rgba（0,0,0,1）；
}
h2，p{
文本缩进：15px；
}
.这边{
位置：固定；
宽度：50px；
身高：100%；
背景色：#fff；
-网络工具包盒阴影：5px 0px 5px 0px rgba（0,0,0,1）；
-moz盒阴影：5px0px5px0pxrgba（0,0,0,1）；
盒影：5px0px5px0pxrgba（0,0,0,1）；
}

我的影子在左边重叠。不酷。

我也遇到了这个麻烦，我用这个丑陋的黑客解决了它：

.top {
  box-shadow: 2px 5px 5px 0px rgba(0,0,0,1);
}
.top:after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 5px;
  height: 100%;
  background: #fff; /*same as side bg*/
}

编辑：

---

我也遇到了这个麻烦，我用这个难看的方法解决了这个问题：

.top {
  box-shadow: 2px 5px 5px 0px rgba(0,0,0,1);
}
.top:after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 5px;
  height: 100%;
  background: #fff; /*same as side bg*/
}

编辑：

---

您只需展开阴影并将模糊作为阴影本身的一部分，这样块的另一侧就看不到模糊。为此，您需要定义扩展半径（阴影的第四个参数），正值增加阴影的大小，负值减小阴影的大小。默认值为0（阴影与模糊大小相同）：

.wrapper所有{
左侧填充：50px；
}
.包装面{
左边距：-50px；
左：50px；
}
.顶{
位置：相对位置；
背景色：#fff；
高度：20px；
-网络工具包盒阴影：2px7px5px-2pxRGBA（0,0,0,1）；
-moz盒阴影：2px7px5px-2pxrgba（0,0,0,1）；
盒影：2px7px5px-2pxRGBA（0,0,0,1）；
}
h2，p{
文本缩进：15px；
}
.这边{
位置：固定；
宽度：50px；
身高：100%；
背景色：#fff；
-网络工具包盒阴影：7px 2px 5px-2px rgba（0,0,0,1）；
-moz盒阴影：7px2px5px-2pxrgba（0,0,0,1）；
盒影：7px2px5px-2pxRGBA（0,0,0,1）；
}

我的影子在左边重叠。不酷。

祝你今天愉快！：）

您只需展开阴影并将模糊作为阴影本身的一部分，这样块的另一侧就看不到模糊了。为此，您需要定义扩展半径（阴影的第四个参数），正值增加阴影的大小，负值减小阴影的大小。默认值为0（阴影与模糊大小相同）：

.wrapper所有{
左侧填充：50px；
}
.包装面{
左边距：-50px；
左：50px；
}
.顶{
位置：相对位置；
背景色：#fff；
高度：20px；
-网络工具包盒阴影：2px7px5px-2pxRGBA（0,0,0,1）；
-moz盒阴影：2px7px5px-2pxrgba（0,0,0,1）；
盒影：2px7px5px-2pxRGBA（0,0,0,1）；
}
h2，p{
文本缩进：15px；
}
.这边{
位置：固定；
宽度：50px；
身高：100%；
背景色：#fff；
-网络工具包盒阴影：7px 2px 5px-2px rgba（0,0,0,1）；
-moz盒阴影：7px2px5px-2pxrgba（0,0,0,1）；
盒影：7px2px5px-2pxRGBA（0,0,0,1）；
}

我的影子在左边重叠。不酷。

祝你今天愉快！：）

哪两种元素？有许多。元素现在已命名。谢谢

.side{z-index:10}

？.side{z-index:10}不会阻止

.side

阴影重叠会给PictureBooth哪些元素？有许多。元素现在已命名。谢谢

。侧边{z-index:10}

？。侧边{z-index:10}不会阻止

。侧边

阴影重叠会产生图片阴影，但问题是模糊半径>0。使用模糊时，它仍然重叠：（前两个值不是偏移的模糊。正确，但您使用的是

框阴影：0px 5px 0px 0px rgba（0,0,0,1）；

在

上。top

和`box shadow:5px 5px 0px rgba（0,0,1）；`on

上。添加模糊将使