CSS3 Tutorials (4): page borders and Web text shadows _css3_css_ Web pages

Web page Creation webjx Article Description: The shadow has been around since CSS2, but only Safari has a browser that supports it, and still is. Shadows can be applied to borders and text in CSS3, just like the shadow effect of a picture. The shadow starts around CSS2, but only Safari is a browser

The shadow has been around since CSS2, but only Safari has a browser that supports it, which is still the case now. Shadows can be applied to borders and text in CSS3, just like the shadow effect of a picture.
The shadow has been around since CSS2, but only Safari has a browser that supports it, which is still the case now. Shadows can be applied to borders and text in CSS3, just like the shadow effect of a picture.
Previous article introduced: CSS3 Tutorial (3): Border-color page Border color
Generally can be divided into Box-shadow and Textshadow two categories.
CSS3 's Box-shadow and Textshadow can be written: box-shadow:apx Bpx Cpx #xxx;
Apx = x-Axis
Bpx = y-Axis
Cpx = projection length
#XXX = like the usual color
Knowing this, we can begin to experience it in the following ways ...
Browser compatibility:
In the previous introduction, we have stated that not all browsers support CSS3. The best browser to support the CSS3 shadow effect is Safari, that is, we now only need to-webkit the prefix with a knife.

#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 ...
Browser support:

Firefox (3.0.5)-[Firefox (3.1 prealpha) compatible]

Google Chrome (1.0.154.)

Google Chrome (2.0.156.) (Support is not too good)

Internet Explorer (Ie7/ie8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)
Simple text shading:

. 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 too good)

Internet Explorer (Ie7/ie8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)
Multiple text shadows

. 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; }
Browser support

Firefox (3.0.5)-[Firefox (3.1 prealpha) compatible]

Google Chrome (1.0.154.)

Google Chrome (2.0.156.) (Support is not too good)

Internet Explorer (Ie7/ie8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

The above is CSS3 tutorial (4): page border and page text shadow _css3_css_ page content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

