3D 盒子阴影效果答案

【问题标题】：3D Box Shadow effect3D 盒子阴影效果
【发布时间】：2017-06-22 04:38:25
【问题描述】：

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

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

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

【问题讨论】：

一般来说，我见过这种效果是通过多个 box-shadows 创建的。
你有什么理由将它限制在盒子阴影而不是已经引入的几个特定于 3D 的 CSS3 道具？
@JoshBurgess 启发我！只要它具有相同的浏览器兼容性，我就听好了！
嗯，有几个使用基于深度的 CSS 创建 3D 元素的示例。这是我最近对另一个问题的回答 - stackoverflow.com/questions/26986830/3d-navbar-that-rotates/…，这是网络上人造物理对象的绝佳资源：creativebloq.com/3d/…

标签： css css-shapes

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

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

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)
}

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

【讨论】：

【解决方案4】：

您可以堆叠多个 box-shadow 的水平/垂直偏移量，每一个都比前一个略大。添加的阴影越多，效果就越明显。这是一个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;
}

【讨论】：

我会选择这个答案，但不确定为什么这里有交替的阴影？它给人一种锯齿状边缘的感觉。不像@BurpmanJunior 的回答那样流畅和直接。
当您想在每一侧应用不同的色调时，此方法比 BurpmanJunior 的答案更有用：例如lightgray 右边和 darkgray 下面。

【解决方案5】：

我在使用这两个选项时遇到了一些问题，因此我从 Lea Verou 的优秀书籍 CSS Secrets 中改编了一些对角渐变。我曾考虑通过border-image 在右边框和下边框内创建渐变，但该属性不允许边缘定位，比如border-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*/

&lt;div&gt;This is a short sentence to demonstrate that our little div is responsive.&lt;/div&gt;

【讨论】：

【解决方案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)

【讨论】：