CSS3 box-shadow

Give a three-dimensional sense of shaded

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.