頁面捲曲陰影也在頂部？

Question

參考css的效果來自：Best way to do this kind of drop shadow?

如何（如果有的話）也可以在圖像的頂部應用相同的效果？

Answer 1

嘗試

http://jsfiddle.net/mPnTP/433/

body { 
    padding:20px 0 30px; 
    font:14px/1.5 Arial, sans-serif; 
    text-align:center; 
    color:#333; 
    background:#FAF0D9; 
} 

.drop-shadow { 
    position:relative; 
    float:left; 
    width:40%;  
    padding:1em; 
    margin:2em 10px 4em; 
    background:#fff; 
    -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; 
} 

.drop-shadow:before, 
.drop-shadow:after { 
    content:""; 
    position:absolute; 
    z-index:-2; 
} 

.drop-shadow p { 
    font-size:16px; 
    font-weight:bold; 
} 

/* Lifted corners */ 

.lifted { 
    -moz-border-radius:4px; 
     border-radius:4px; 
} 

.lifted:before, 
.lifted:after { 
    top:15px; 
    left:10px; 
    width:50%; 
    height:20%; 
    max-width:300px; 
    -webkit-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7); 
     -moz-box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7); 
      box-shadow:0 -15px 10px rgba(0, 0, 0, 0.7); 
     -webkit-transform:rotate(3deg); 
     -moz-transform:rotate(3deg); 
     -ms-transform:rotate(3deg); 
     -o-transform:rotate(3deg); 
      transform:rotate(3deg); 

} 

.lifted:after { 
    right:10px; 
    left:auto; 
-webkit-transform:rotate(-3deg);  
     -moz-transform:rotate(-3deg); 
     -ms-transform:rotate(-3deg); 
     -o-transform:rotate(-3deg); 
      transform:rotate(-3deg); 
} 


<div class="drop-shadow lifted"> 
    <p>Lifted corners</p> 
</div> 

Answer 2

你可以把另一個DIV角落找尋與頂部對齊PNG影子，也可以使用CSS多背景（不能在所有的瀏覽器）