CSS3 チュートリアル (4): Web ページの境界線と Web ページのテキストshadow_css3_CSS_Web page

Webjx 記事の紹介: シャドウは CSS2 から存在していますが、それをサポートしているのは Safari だけであり、これは現在でも当てはまります。写真の影効果と同じように、CSS3 の境界線やテキストに影を適用できます。影は CSS2 から存在していますが、ブラウザは Safari

1 つだけです。影は CSS2 から存在していますが、Safari One ブラウザのみがサポートされています。それは今もそうです。画像の影効果と同じように、CSS3 で境界線やテキストに影を適用できます。
影は CSS2 から存在しますが、それをサポートしているのは Safari だけであり、これは現在でも当てはまります。画像の影と同じように、CSS3 の枠線やテキストに影を適用できます。
前回紹介した記事：CSS3チュートリアル(3)：border-color Webページの枠線の色
一般的には、box-shadowとtextshadowの2つに分類できます。
CSS3 box-shadow と textshadow は次のように記述できます: box-shadow:Apx Bpx Cpx #xxx;
Apx = x 軸
Bpx = y 軸
Cpx = 投影の長さ
#XXX = 通常の色
これらを理解しました、次の方法でそれを体験し始めることができます...
ブラウザの互換性:
前の紹介で、CSS3 シャドウ効果をサポートする最良のブラウザは Safari だけであると述べました。 Knife-Webkit プレフィックスを使用する必要があります。

#boxShadow{ border: 5px ソリッド #111; -webkit-box-shadow: 5px 5px 7px #999; -webkit-border-bottom-right-radius: 15px 25px; ; 高さ: 継承; 幅: 590px; }

この効果は写真にも使用できます。 154 .)

Google Chrome (2.0.156.) (サポートはあまり良くありません)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1、Windows)

シンプルなテキストシャドウ:

.textShadowSingle { font-size: 3.2em; color: #F5F5F5; text-shadow: 3px 3px 7px #111;

ブラウザのサポート:

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) 対応]

Google Chrome (1.0.154.)

Google Chrome (2.0.156.) (サポートはあまり良くありません)

Internet Explorer (IE7/ IE8 RC1)

Opera ( 9.6)

Safari (3.2.1、Windows)

複数のテキストシャドウ

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

ブラウザサポート

[FireFox (3.1 PreAlpha) 互換]

154 .)

Google Chrome (2.0.156.) (サポートはあまり良くありません)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

上記CSS3 チュートリアル (4): Web ページの境界線と Web ページのテキストshadow_css3_CSS_Web ページのコンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。