如何創建一個邊框陰影插圖

Question

如何創建一個邊框陰影插圖作爲在上面的圖片

jsfiddle

<div id="progress-bar"> 
    <div id="bar"></div>       
</div> 

#progress-bar { 
    margin-top: 50px; 
    margin-bottom: 100px; 
} 

#bar { 
    width: 97%; 
    height: 20px; 
    background-color: #eeebf1; 
    border-radius: 9px; 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 

} 

Answer 1

您可以使用css box-shadow屬性：Box Shadow

#bar { 
width: 97%; 
height: 20px; 
background-color: #eeebf1; 
border-radius: 9px; 
-moz-border-radius: 9px; 
-webkit-border-radius: 9px; 
    -moz-box-shadow: 3px 3px 3px #CCC inset; 
    -webkit-box-shadow: 3px 3px 3px #CCC inset; 
    box-shadow: 3px 3px 3px #CCC inset; 
} 

http://jsfiddle.net/8kbwd/2/

Answer 2

給這個一杆...

.shadow { 
    -moz-box-shadow-top: inset 0 0 10px #000000; 
    -webkit-box-shadow-top: inset 0 0 10px #000000; 
    box-shadow-top:   inset 0 0 10px #000000; 
}