3D Box Shadow effect

问题:

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

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

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

回答1:

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

回答2:

you can use pseudo element for as shadow

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>

回答3:

Here is a real 3D shadow using perspective and pseudo-element :before.

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:

You can stack the horizontal/vertical offsets of several box-shadows, each slightly bigger than the previous one. The more shadows you add, the more pronounced the effect. Here is a fiddle example.

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

回答5:

I had some problems with these two options, so I adapted some diagonal gradients from Lea Verou's excellent book CSS Secrets. I thought about creating a gradient inside a right and bottom border via border-image, but that property does not allow edge targeting, à la border-right-image, etc.

So, I settled on using a pseudo element with two truncated corners, which seems to work pretty well. You have to be careful to adjust the width of the gradient to be 1.414 the size of half the padding, since this would be the diagonal of a square (square root of two). Also, since that's a pseudo element, be careful of the right placement. Interested to hear what you folks think.

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>

回答6:

Here's a little implementation, inspired by @Vitorino fernandes, in 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)