3D箱子阴影效果 [英] 3D Box Shadow effect

问题描述

所以我知道如何使用CSS3做一个基本的box shadow。您可以在下面的图片上方看到。

So I know how to do a basic box shadow with CSS3. You can see that in the top of the graphic below.

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

The effect I'm trying to achieve is a 3D box shadow, as shown in the bottom of the graphic below.

有关如何使用CSS3框阴影进行此操作的任何想法？

Any ideas on how to do this with CSS3 box shadows?

推荐答案

遗憾的是阴影实际上只是平坦的层。但是，您可以应用多个框阴影来创建此效果。

Unfortunately box shadows are effectively just flat layers. However you can apply multiple box shadows to create this effect.

.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;
}

这篇关于3D箱子阴影效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！