Box shadows
Box shadows allow you to create a box-shaped shadow around the outside or inside of an element. Once you understand text shadows, box shadows are a piece of cake. Principally, they follow the same syntax: horizontal offset, vertical offset, blur, spread (we will get to spread in a moment), and color. Only two of the four length values are required. In the absence of the last two length values, a value of zero is assumed. Let’s look at a simple example:
.shadow {
box-shadow: 0 3px 5px #444;
}
The default box-shadow is set on the outside of the element. Another optional keyword, inset, allows the box shadow to be applied inside the element.
Inset shadow
The box-shadow property can also be used to create an inset shadow. The syntax is identical to a normal box shadow, except that the value starts with the keyword inset:
.inset {
box-shadow: inset 0 0 40px #000;
}
Everything functions as before, but the inset part of the declaration instructs...