箱子陰影效果

-3

我想對div應用陰影，但是我一直無法達到預期的效果。效果在元素「下面」。箱子陰影效果

例子：http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

CSS

ul#nav li { 
    display: inline; 
    line-height: 40px; 
} 

/* Shadow effect */ 
.shadow-effect { 
    position: relative; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 

.shadow-effect:before, .shadow-effect:after { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8); 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8); 
    box-shadow: 0 0 10px rgba(0,0,0,0.8); 
    top: 20%; 
    bottom: 0; 
    left: 50px; 
    right: 50px; 
    -moz-border-radius: 100px/10px; 
    border-radius: 100px/10px; 
}

來源

2014-01-24 user3231901

顯示您想要的陰影類型的圖像，因爲我可以在瀏覽器上看到陰影（firefox）。您正在使用哪種瀏覽器？ – Zword

詢問代碼的問題必須證明對所解決問題的最小理解。包括嘗試解決方案，爲什麼他們沒有工作，以及預期的結果。另請參閱：堆棧溢出問題清單。 –

你的jsfiddle對我來說不太清楚。這是你想要的？ http://jsfiddle.net/Ck7pG/1/ – equisde

我只是認爲從您提供的網站您的要求，我覺得這是你所需要的

DEMO

.shadow-effect { 
    position:relative;  
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px     rgba(0, 0, 0, 0.1) inset; 
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 
.shadow-effect:before, .shadow-effect:after { 
    content:""; 
    position:absolute; 
    z-index:-1; 
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.8); 
    box-shadow:0 0 10px rgba(0,0,0,0.8); 
    top:20%; 
    bottom:0; 
    left:50px; 
    right:50px; 
    -moz-border-radius:100px/10px; 
    border-radius:100px/10px; 
} 


.box h3{ 
    text-align:center; 
    position:relative; 
    top:80px; 
} 
.box { 
    width:70%; 
    height:100px; 
    background:#FFF; 
    margin:40px auto; 
} 


.effect6 
{ 
    position:relative;  
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
     -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
} 
.effect6:before, .effect6:after 
{ 
    content:""; 
    position:absolute; 
    z-index:-1; 
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    box-shadow:0 0 20px rgba(0,0,0,0.8); 
    top:50%; 
    bottom:0; 
    left:10px; 
    right:10px; 
    -moz-border-radius:100px/10px; 
    border-radius:100px/10px; 
}

來源

2014-01-24 12:27:36

箱子陰影效果

回答

相關問題