CSS3 tutorial (4): Web page borders and web page text shadow_css3_CSS_Web page

Webjx article introduction: Shadows have been around since CSS2, but only Safari supports it, and this is still the case today. Shadows can be applied to borders and text in CSS3, just like the shadow effect of images. Shadows have been around since CSS2, but there is only one browser: Safari

Shadows have been around since CSS2, but only Safari One browser supported it and still does today. Shadows can be applied to borders and text in CSS3, just like the shadow effect of images.
Shadows have been around since CSS2, but only Safari supports it, and this is still the case today. Shadows can be applied to borders and text in CSS3, just like shadows for images.
The previous article introduced: CSS3 tutorial (3): border-color web page border color
Generally, it can be divided into two categories: box-shadow and textshadow.
CSS3 box-shadow and textshadow can be written as: box-shadow:Apx Bpx Cpx #xxx;
Apx = x-axis
Bpx = y-axis
Cpx = projection length
#XXX = color as usual
Understood these , we can start to experience it in the following way...
Browser compatibility:
In the previous introduction, we have stated that not all browsers support CSS3. The best browser that supports CSS3 shadow effect is Safari, that is, we now only need to use the knife-webkit prefix.

#boxShadow{ border: 5px solid #111; -webkit-box-shadow: 5px 5px 7px #999; -webkit-border-bottom-right-radius: 15px; padding: 15px 25px ; height: inherit; width: 590px; }
This effect can also be used for pictures...
Browser support:

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) compatible]

Google Chrome (1.0.154 .)

Google Chrome (2.0.156.) (support is not very good)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)
Simple text shadow:

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

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) compatible]

Google Chrome (1.0.154.)

Google Chrome (2.0.156.) (support is not very good)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)
Multiple text shadow

.textShadowMultiple { font-size: 3.2em; color: #FFF; text-shadow: 0px -11px 10px #C60, 0px -3px 9px # FF0; text-align: center; padding: 10px 0px 5px 0px; background: #151515; }
Browser support

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) compatible]

Google Chrome (1.0.154 .)

Google Chrome (2.0.156.) (support is not very good)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

The above is the CSS3 tutorial (4): Web page border and web page text shadow_css3_CSS_The content of the web page. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!