CSS Shadows только на нижних сторонах DIV

Question

Как я могу создавать тени, как это с помощью CSS3:

Я пытался играть с:

box-shadow: 6px 6px 6px -6px #919191; 

К сожалению, не получится так, как я хочу Это.

Answer 1

попробовать это:

.box { 
 
\t width:70%; 
 
\t height:200px; 
 
\t background:#FFF; 
 
\t margin:40px auto; 
 
} 
 
.effect2 
 
{ 
 
    position: relative; 
 
} 
 
.effect2:before, .effect2:after 
 
{ 
 
    z-index: -1; 
 
    position: absolute; 
 
    content: ""; 
 
    bottom: 15px; 
 
    left: 10px; 
 
    width: 50%; 
 
    top: 80%; 
 
    max-width:300px; 
 
    background: #777; 
 
    -webkit-box-shadow: 0 15px 10px #777; 
 
    -moz-box-shadow: 0 15px 10px #777; 
 
    box-shadow: 0 15px 10px #777; 
 
    -webkit-transform: rotate(-3deg); 
 
    -moz-transform: rotate(-3deg); 
 
    -o-transform: rotate(-3deg); 
 
    -ms-transform: rotate(-3deg); 
 
    transform: rotate(-3deg); 
 
} 
 
.effect2:after 
 
{ 
 
    -webkit-transform: rotate(3deg); 
 
    -moz-transform: rotate(3deg); 
 
    -o-transform: rotate(3deg); 
 
    -ms-transform: rotate(3deg); 
 
    transform: rotate(3deg); 
 
    right: 10px; 
 
    left: auto; 
 
}

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

из [http://cssdeck.com/labs/different-css3-box-shadows-effects] [1]