CSS3 Tutorial CSS3: Shadow

The shadow has been around since CSS2, but only Safari has a browser to support it, and still is. Shadows can be applied to borders and text in CSS3, just like the shadow effect of a picture.

Generally can be divided into Box-shadow and Textshadow two categories.

CSS3 Box-shadow and Textshadow can be written: box-shadow:apx bpx CPX #xxx;
Apx = x Axis
bpx = y axis
CPX = projection length
#XXX = a color as usual

With this in view, we can begin to experience the following methods ...

Browser compatibility:

In the previous introduction, we have stated that not all browsers support CSS3. The best browser to support CSS3 shading is safari, which means we now need to use a knife to-webkit the prefix.

#boxShadow {border:5px solid #111;-webkit-box-shadow:5px 5px 7px #999;-webkit-border-bottom-right-radius:15px; Paddin g:15px 25px; Height:inherit; width:590px; }

This effect can also be used for pictures ...

Simple text Shadow:

. textshadowsingle {font-size:3.2em; color: #F5F5F5; text-shadow:3px 3px 7px #111; text-align:center;}

. textshadowmultiple {font-size:3.2em color: #FFF; text-shadow:0px-11px 10px #C60, 0px-3px 9px #FF0; text-align:cent Er padding:10px 0px 5px 0px; Background: #151515; }

Multiple text shadows