3D盒子阴影效果

Question

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

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

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

Answer 1

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

div {
  background: black;
  height: 100px;
  width: 100px;
  position: relative;
}
div:after,
div:before {
  content: '';
  background: grey;
  position: absolute;
}
div:after {
  width: 100%;
  height: 20px;
  left: 10px;
  bottom: 0;
  transform: translatey(100%) skewx(45deg);
}
div:before {
  width: 20px;
  height: 100%;
  right: 0;
  transform: translatex(100%) skewy(45deg);
  top: 10px;
}

<div></div>

Answer 2

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

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

Answer 3

以下是使用perspective和伪元素:before的真实3D阴影。

＆＃13;

＆＃13;

body {
  background: lightblue;
}
.foo {
  position: relative;
  display: inline-block;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  persepctive: 1000px;
  margin: 20px;
  margin-top: 50px;
}
.foo .box {
  transform: rotateY(-40deg);
  height: 350px;
  width: 250px;
  background-color: black;
}
.foo:before {
  content: "";
  top: -15px;
  position: absolute;
  width: 50px;
  height: 375px;
  background-color: grey;
  transform: translateX(215px) translateY(2.7px) rotateY(55deg)
}

＆＃13;

<div class="foo">
  <div class="box"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以叠加多个框阴影的水平/垂直偏移，每个阴影稍大于前一个。添加的阴影越多，效果越明显。这是一个fiddle示例。

div {
    background: black;
    height: 100px;
    width: 100px;
    box-shadow:  0 01px gray,
                 01px 0 gray,
                 01px 02px gray,
                 02px 01px gray,
                 02px 03px gray,
                 03px 02px gray,
                 03px 04px gray,
                 04px 03px gray,
                 04px 05px gray,
                 05px 04px gray,
                 05px 06px gray,
                 06px 05px gray;
}

Answer 5

我在这两个选项上遇到了一些问题，所以我根据Lea Verou的优秀书籍 CSS Secrets 调整了一些对角渐变。我考虑过通过border-image在右边框和右边框内创建渐变，但该属性不允许边缘定位，àlaborder-right-image等。

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

div {
  background: #bbb;
  padding: 1em 1.2em;
  width: 50%;
  margin: 0 auto;
  color: #111;
  font: 150%/1.2 Georgia, Palatino, Times, serif;
  position: relative;
}

div:after {
  content:" ";
  position:absolute;
  top:0;
  left: 0;
  width:100%;
  height:100%;
  padding: 1.42em; /* (square root of gradient position) */
  background: #000; /* Fallback if not supported */
  background: linear-gradient(-135deg, transparent 2em, #000 0) top right,
    linear-gradient(#000, #000) padding-box bottom right,
    linear-gradient(45deg, transparent 2em, #000 0) bottom left; 
    /*I have avoided adding -webkit-, -moz and -0 prefixs for linear-gradient.  You may put them in later to be extra safe*/
    background-size: 50% 50%; /* There is no reason to paint the upper left quadrant, so I didn't. */
    background-repeat: no-repeat;
    -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box; 
    /*  Many people use border-box as default these days. Unfortunately, the box cannot be sized using border-box settings with the combination of padding in ems and percentages.  So this is reset to content-box, just in case.   */
    z-index: -1; /* To keep the shadow behind the div*/

<div>This is a short sentence to demonstrate that our little div is responsive.</div>

Answer 6

这是一个小小的实现，受@Vitorino fernandes的启发，在stylus ......

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)