CSS shadow effects (no need for pictures to achieve)

First look at the effect

This effect can be achieved only with a single specified Div, which is actually handy for future calls and so on. In fact, feel the realization of their own is not particularly good, compared to the original seems to always feel the lack of something, but basically also completed.

HTML is not much said, is a plus. The div,css part of Shadow is the key!

The core components are as follows:

Body. Shadow {
position:relative;
Background-color: #fff;
margin:20px Auto;
Vertical-align:center;
border: #fff 1px solid;
box-shadow:1px 1px 3px #000, 1px 1px 5px 5px #eee inset;
}
Body. Shadow:before {
Content: ';
Z-index:-1;
top:50%;
Bottom: -3px;
left:0;
Right: -1px;
Position:absolute;
box-shadow:0px 0px 2px #000;
border-radius:500px/10px;
}

Because it is written in stylus, so the resulting CSS is purple, do not mind.

Box-shadow can be separated by commas, and then set good inside and outside light, about Box-shadow,

The first second is the offset, the third is the shadow size, the fourth is the degree of diffusion, written and written on the memory of the WWW

Then we use before and after the pseudo class, now look at these two elements or very good use, the equivalent of no additional div can achieve results, otherwise the words will be added div implementation.

There is a content attribute, you can set the display in before, where we do not need content, if you need, such as Hello, then content: ' Hello ' on the line.

Then the size of the positioning, here also rose posture, set the size of the two ways:

Width/height Set

Top/bottom/left/right fully Set

Both of these ways can be achieved, here is the second set of, conveniently located.

Then Box-shadow, finish the shadow, you can set the Background-color set color, so easy to view.

border-radius:500px/10px, you can read the manual.