ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。