2015-04-30 138 views
0

的下邊我怎樣才能創建像這樣使用CSS3陰影:enter image description hereCSS陰影只在DIV

我試圖用打轉轉:

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

遺憾的是它並沒有變成我想要的方式它。

+4

http://cssdeck.com/labs/different-css3-box-shadows-effects? –

+0

@Fabrizio,看看圖片.. –

+0

@ Mr.Alien發表您的評論作爲回答,我會接受它!謝謝! –

回答

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]