3D 盒子阴影效果

Question

所以我知道如何用 CSS3 做一个基本的盒子阴影。您可以在下图的顶部看到这一点。

我想要达到的效果是一个 3D 盒子阴影，如下图底部所示。

关于如何使用 CSS3 框阴影做到这一点的任何想法？

原文由 Corey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不幸的是，盒子阴影实际上只是平面层。但是，您可以应用多个框阴影来创建此效果。

 .box-shadow-3d{
    box-shadow: 1px 1px 0px #999,
                2px 2px 0px #999,
                3px 3px 0px #999,
                4px 4px 0px #999,
                5px 5px 0px #999,
                6px 6px 0px #999;
}

原文由 BurpmanJunior 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在 @Vittorino fernandes 代码中添加了一些剪辑路径，以避免伪代码之间的空白并使其更清晰。我添加了一些 1px 调整以避免糟糕的 svg 渲染问题。

您可以使用名为 shadow-dimension 的变量来设置阴影的宽度和高度。

我把它放在 codePen 上： https ://codepen.io/silviamalavasi/pen/XWqeWEq

 :root {
    --shadow-dimension: 20px;
    --blue: #0039a6;
}
.box-container {
    position: relative;
 }
.box-container>div {
    border: 2px solid var(--blue);
}
.box-container>div:after, .box-container>div:before {
    content: '';
    background-color: var(--blue);
    position: absolute;
}
.box-container>div:before {
    width: calc(var(--shadow-dimension) + 1px);
    height: calc(100% +  100px + 1px);
    left: calc(var(--shadow-dimension) * -1);
    transform: skewy(-45deg);
    top: calc(0.5*var(--shadow-dimension));
    clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 100px - 2px + var(--shadow-dimension)), 0% calc(100% - 100px - 2px));
}
.box-container>div:after {
    width: calc(100% + 100px);
    height: calc(var(--shadow-dimension) + 1px);
    left: calc(-0.5*var(--shadow-dimension) - 100px);
    bottom: 1px;
    transform: translateY(100%) skewx(-45deg);
    clip-path: polygon(100px 0%, 100% 0%, 100% 100%, calc(100px + 2px) 100%);
}

原文由 Silvia Malavasi 发布，翻译遵循 CC BY-SA 4.0 许可协议