Css 3D长方体阴影效果

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

我试图实现的效果是3D框阴影，如下图底部所示

关于如何使用CSS3盒阴影实现这一点，有什么想法吗

---

您可以堆叠多个长方体阴影的水平/垂直偏移，每个都比前一个稍大。添加的阴影越多，效果越明显。这里有一个例子

---

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

.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阴影，使用透视图和伪元素

正文{
背景：浅蓝色；
}
傅先生{
位置：相对位置；
显示：内联块；
-webkit透视图：1000px；
-moz透视图：1000px；
持续时间：1000px；
利润率：20px；
边缘顶部：50px；
}
.foo.box{
变换：旋转（-40度）；
高度：350px；
宽度：250px；
背景色：黑色；
}
傅：以前{
内容：“；
顶部：-15px；
位置：绝对位置；
宽度：50px；
身高：375px；
背景颜色：灰色；
变换：translateX（215px）translateY（2.7px）rotateY（55度）
}

---

您可以使用伪元素作为阴影

div{
背景：黑色；
高度：100px；
宽度：100px；
位置：相对位置；
}
部门：之后，
部门：以前{
内容：''；
背景：灰色；
位置：绝对位置；
}
部门：之后{
宽度：100%；
高度：20px；
左：10px；
底部：0；
变换：translatey（100%）skewx（45度）；
}
部门：以前{
宽度：20px；
身高：100%；
右：0；
变换：translatex（100%）歪斜（45度）；
顶部：10px；
}

---

我在这两个选项上遇到了一些问题，因此我改编了Lea Verou的优秀著作《CSS秘密》中的一些对角线渐变。我曾考虑过通过

边框图像

在右边框和下边框内创建渐变，但该属性不允许边缘定位，比如

边框右边框图像

，等等

所以，我决定使用一个带有两个截断角的伪元素，它似乎工作得很好。您必须小心地将渐变的宽度调整为填充一半大小的1.414，因为这是正方形的对角线（2的平方根）。此外，由于这是一个伪元素，请注意正确的位置。我很想听听你们的想法

div{
背景:#bbb ;；
填料：1米1.2米；
宽度：50%；
保证金：0自动；
颜色：#111；
字体：150%/1.2佐治亚、巴拉蒂诺、泰晤士报、衬线；
位置：相对位置；
}
部门：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
填充：1.42em；/*（梯度位置的平方根）*/
背景：#000；/*如果不受支持，则返回*/
背景：线性渐变（-135度，透明2em，#000 0）右上角，
线性渐变（#000，#000）填充框右下角，
线性梯度（45度，透明2em，#000 0）左下角；
/*我已经避免为线性渐变添加-webkit-、-moz和-0前缀。为了更安全，您可以稍后将它们放入*/
背景大小：50%50%；/*没有理由绘制左上象限，所以我没有*/
背景重复：无重复；
-webkit框大小：内容框；-moz框大小：内容框；框大小：内容框；
/*现在很多人使用边框框作为默认设置。不幸的是，边框框的大小不能使用ems中的填充和百分比组合来设置。因此，为了以防万一，这将重置为内容框*/
z-index:-1；/*将阴影保留在div后面*/

---

这是一个简短的句子来证明我们的小div是有响应的。

这里有一个小实现，灵感来自于@Vitorino fernandes，在

---

一般来说，我见过这种效果是通过多个方块阴影创建的。你为什么只将其限制为方块阴影，而不是引入的几个3D特定CSS3道具？@Joshburges启发我！只要它具有相同的浏览器兼容性，我洗耳恭听！好吧，有几个创建的例子使用基于深度的CSS的3D元素。这是我最近对另一个问题的回答-，这是一个关于网络上人造物理对象的很好的资源：我会选择这个答案，但不确定为什么这里会有交替阴影？它给人一种锯齿状的边缘感觉。不像@BurpmanJunior的回答那样平滑和直接。这种方法我当你想对每一面应用不同的颜色时，它比BurpmanJunior的答案更有用：例如，右边是浅灰色，下面是暗灰色。

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

offset = 10
border = 3
.offsetbox
   margin offset
   padding offset
   text-align center
   box-shadow inset 0 0 0 unit(border,px) black
   background white
   display inline-block
   position relative
   &:after,
   &:before
      content ''
      background black
      position absolute
   &:after
      width 100%
      height offset
      transform translatey(100%) skewx(-45deg)
      right (offset/2)
      bottom 0
   &:before
      height 100%
      width offset
      transform: translatex(-100%) skewy(-45deg)
      left 0
      top (offset/2)