CSS3のボックスシャドウ

基本的な説明:

外側の影: box-shadow: X 軸 Y 軸 Rpx カラー;

プロパティの説明 (対応する順序): Shadow の Shadow Blur 値 (サイズ) 影の色

内側のシャドウ: box-shadow: (div、p、h1、h2、h3、h4、h5、h6 など) のボックス モデルで使用されます。テキスト シャドウの設定には使用されません。テキスト シャドウを設定する場合は、ナレッジ ポイント: text-shadow (同じ原理)

新しい属性であるため、主要なブラウザとの互換性を確保し、これらの主要なブラウザの下位バージョンをサポートするために、主流のブラウザで box-shadow 属性を使用する場合、属性の名前をフォーム-webkit-box-shadow。 Firefox ブラウザは、

Oupeng ブラウザ-O-BOX-SHADOW IE> 9-BOX-SHADOW

の形式で-Moz-Box-SHADOW として記述する必要があります。 基本的な説明:

Box をよりよく理解するために、Box-Shadow をよりよく理解するために- シャドウ機能、いくつかの小さなテストを実行します: (スタイルをタグ内で直接ネストするため)

テスト 1:

box-shadow: 0 0 10px #f00 (X 軸と Y 軸が移動しないため)ここで、設定値はそれ自体に影響します 半径範囲、色)

テスト 2:

box-shadow: 4px 4px 10px #f00; テスト 1 とは異なり、X 軸と Y-軸が正の値に変更されました (正の値が右と下に移動します) ので、次のようになりました‍

テスト 3:

box-shadow:-4px -4px 10px #f00;テスト 2 との違いは、 X 軸と Y 軸が負の値に変更されました (左上に向かう負の値) ので、次のようになります‍

同様に、次の正の値とその次の正の値の影響をテストできます負の値ですが、ここではテストは行いません。 。 。 。 。 。 。 。

テスト 4:

」 *下の影*/ >

見てください このようなコードは面倒に感じますが、エフェクトの画像を見れば、X 軸を変更するだけでどのように行われるか理解できるでしょう。 Y 軸の位置、色の値、影の値のサイズ (カンマで区切る) を確認して、さらに練習してください

。