Tutoriel CSS3 (4) : Bordures de page Web et texte de page Web shadow_css3_CSS_Web page

Production de pages Web Introduction de l'article Webjx : Les ombres existent depuis CSS2, mais seul Safari les supporte, et c'est encore le cas aujourd'hui. Les ombres peuvent être appliquées aux bordures et au texte en CSS3, tout comme l'effet d'ombre des images. Les ombres existent depuis CSS2, mais Safari est le seul navigateur

Les ombres existent depuis CSS2 Oui, mais seul Safari le prend en charge, et c'est toujours le cas aujourd'hui. Les ombres peuvent être appliquées aux bordures et au texte en CSS3, tout comme l'effet d'ombre des images
Les ombres existent depuis CSS2, mais seul Safari les prend en charge, et c'est toujours le cas aujourd'hui. Les ombres peuvent être appliquées aux bordures et au texte en CSS3, tout comme les ombres pour les images.
L'article précédent présentait : Tutoriel CSS3 (3) : border-color Couleur de la bordure de la page Web
Peut généralement être divisé en deux catégories : box-shadow et textshadow.
Box-shadow et textshadow CSS3 peuvent être écrits comme : box-shadow:Apx Bpx Cpx #xxx;
Apx = x-axis
Bpx = y-axis
Cpx = longueur de projection
#XXX = la même couleur que d'habitude
Comprenant cela, nous pouvons commencer à en faire l'expérience de la manière suivante...
Compatibilité des navigateurs :
Dans l'introduction précédente, nous avons indiqué que tous les navigateurs ne sont pas tous les navigateurs prend en charge CSS3. Le meilleur navigateur prenant en charge les effets d'ombre CSS3 est Safari, ce qui signifie que nous n'avons besoin que du préfixe knife-webkit pour le moment.

#boxShadow{ bordure : 5px solide #111 ; -webkit-box-shadow : 5px 5px 7px #999 ; -webkit-border-bottom-right-radius : 15px ; padding : 15px 25px ; height : hériter ; width : 590px ; }
Cet effet peut également être utilisé pour les images...
Prise en charge du navigateur :

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

Google Chrome (1.0.154.)

Google Chrome (2.0.156.)( Pris en charge Pas très bien)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)
Ombre de texte simple :

.textShadowSingle { taille de police : 3,2em ; couleur : #F5F5F5 ; ombre de texte : 3px 3px 7px #111 ; Prise en charge de Browse Server :

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

Google Chrome (1.0.154.)

Google Chrome (2.0. 156 .) (Le support n'est pas très bon)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

TextShadow multiple

.textShadowMultiple { taille de police : 3,2em couleur : #FFF ; ombre de texte : 0px -11px 10px #C60, 0px -3px 9px #FF0; ; alignement du texte : centre ; remplissage : 10px 0px 5px 0px ; arrière-plan : #151515 ; }

Prise en charge du navigateur

FireFox (3.0.5) - [Compatible avec FireFox (3.1 PreAlpha)]

Google Chrome (1.0.154.)

Google Chrome (2.0.156.) (le support n'est pas très bon)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

Ce qui précède est le contenu du didacticiel CSS3 (4) : bordure de page Web et texte Web shadow_css3_CSS_ page Web Pour plus d'informations. contenu, veuillez visiter Suivez le site Web PHP chinois (www.php.cn) !