CSS3シャドウの使い方の紹介

1. ボーダーシャドウ

標準構文:

box-shadow : h-offset v-offset ブラースプレッドカラー [ inset ] ,...

[オフセットは右下が正で、左上が負です]

a.影が複数ある場合はカンマで区切って、最初の影を上に書いて下に順番に重ねていきます

b.差し込みがある場合は内側の影になりますがご了承ください。 ：元の単純な影の場合 インセットを追加すると、単純に反転して反転するのではなく、反対側の内側に影が入ります。

c. 拡張スプレッドの最大のメリットと効果は、要素内の DIV が色で塗りつぶされると、残りの 3 つの側面への干渉をシールドまたは軽減することです。色付きの部分によって隠されますが、内側の色付き DIV を相対に設定し、z-index を -1 に設定して、ブロックされた内側の影を表示できます。

[この状況はまれであり、多くの制限があります]

2. テキストシャドウ

標準構文:

text-shadow: h-offset v-offset Blur color,...

[ オフセット方向 右下は正の値、左上が負の値です。 ]

a. 複数の影がある場合は、それらをカンマで区切って、最初の影を上に書いて下に順番に積み重ねます

効果 2: Apple スタイル効果

.demo4 { color: #000;

text-shadow: 0 1px 1px #fff; 0 #333,1px 1px 0 #444;}

エフェクト 4: Blurytext エフェクト

.demo6 { color: 透明;

テキスト-shadow: 0 0 5px #f96;}

エフェクト 7: 3D テキストエフェクト

。demo10 { color: #fff;

text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba( 197, 223, 248,0.8),3px 3px rgba(197, 223,

)

以上がCSS3シャドウの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。