CSS3 box-shadow
By attaching a shadow to the elements, and it is possible to create a design, such as the element it is floating as if.
div#b-shadow{
width:90%;
height:100px;
background:#FAFAFA;
box-shadow:3px 3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.5);
}
In addition, and put the "inset", it is possible to put a shadow on the inside, it can be similar to the following expression.
div#b-shadow{
width:90%;
height:100px;
background:#FAFAFA;
box-shadow:-3px -3px 3px rgba(0,0,0,0.5) inset;
-webkit-box-shadow:-3px -3px 3px rgba(0,0,0,0.5) inset;
}
In addition, you can also the following expression.
div#b-shadow{
width:90%;
height:100px;
background:#FAFAFA;
box-shadow:-3px -3px 3px rgba(0,0,0,0.3);
-webkit-box-shadow:-3px -3px 3px rgba(0,0,0,0.3);
}
Here comes out "-webkit-" of the vendor prefix, but this is because of the correspondence to -webkit- system browser.
Let's further polish the expressive power by skillfully using the shadow.
[reference]CSS Reference