如何创建边框阴影插图

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;
}