CSS3 フィルターの違いと応用の詳しい説明:ドロップシャドウフィルターとボックスシャドウ

標準 CSS3 を使用して要素の影の効果を実現するには、2 つの手順があります。1 つ目は一般的なbox-shadowを使用すること、2 つ目は CSS3 filter shadow フィルターdrop-shadow使用することです。これら 2 つの影の実装の具体的な違いは何でしょうか?

1. 互換性は様々

CSS3 box-shadow IE9 からサポートされており、互換性は次のスクリーンショットに示されています。

drop-shadow filterは、モバイル デバイス上の IE13 および Android 4.4 でのみサポートされます。互換性は以下のとおりです。

2. 同じパラメータ値でもパフォーマンス効果は異なる

filter内のdrop-shadow構文は次のとおりです。

フィルター: ドロップシャドウ(x オフセット、y オフセット、ぼかしサイズ、カラー値);

フィルター:ドロップシャドウ(5px 5px 10px 黒)

右下に 5 ピクセルオフセットされ、10 ピクセルぼかされた黒い影を表します。百聞は一見にしかず、以下の図をご覧ください。

ただし、同じパラメータ値でbox-shadowを使用する場合、次のようになります。

ボックスの影: 5px 5px 10px 黒;

box-shadowの影の距離が小さくなり、色の値が暗くなることがわかります。

3. ドロップシャドウには内側の影効果がありません

box-shadow次のようなinsetシャドウをサポートします。

ボックスシャドウ: インセット 5px 5px 10px 黒;

ただし、 drop-shadowそうではありません。

4. シャドウとボックスシャドウ

drop-shadowは非常に強力な機能であり、この機能 1 つで将来的に活躍する機会が十分に得られます。つまり、 drop-shadowは実際の投影であり、 box-shadowは単なるボックスシャドウです。

それはどういう意味ですか？

CSS のborderを使用して点線のボックスを記述してみましょう。例:

 境界線: 10px 破線 #fa608d;
    高さ: 50px;
    幅: 50px; 

次に、 box-shadowフィルターとdrop-shadowフィルターをそれぞれ適用します。

ボックスの影: 5px 5px 10px 黒;
 フィルター: ドロップシャドウ(5px 5px 10px 黒);

ボックスシャドウ:

フィルター:ドロップシャドウ:

box-shadow 、その名前が示すように、ボックスの影です。考えてみてください。ボックスの中央は透明ですが、影を落とすと光は透過しません。ただし、 drop-shadow現実世界の投影に準拠しています。不透明な色については投影があり、透明な部分については光は投影されずに通過します。ボックスであるかどうかは私には関係ありません。

drop-shadow 、コードによって構築された要素の透明な部分だけでなく、以下に示すように PNG 画像の透明な部分も貫通します。

6. ドロップシャドウの実用化

矢印が向いているフローティングパネルを実装する場合、互換性を考慮すると、三角形は基本的にborderで描画され、 box-shadow使用できません。ただし、デザイナーは長方形の部分に影が付くことを望んでいます。

矢印には影がないのでカモフラージュできます。 drop-shadowを使用すると、影が本当に影になります。

CSSコード:
。箱 {
    マージン: 40px; パディング: 50px;
    背景色: #fff;
    位置: 相対的;
    フォントサイズ: 24px;
}
.cor {
    位置: 絶対;
    左: -40px;
    幅: 0; 高さ: 0;
    オーバーフロー: 非表示;
    境界線: 20px 透明の実線;
    右境界線の色: #fff;
}
.box-shadow {
    ボックスの影: 5px 5px 10px 黒;
}
.ドロップシャドウ {
    フィルター: ドロップシャドウ(5px 5px 10px 黒);
}
HTMLコード:
<div class="box box-shadow">
    <i class="cor"></i>
    ボックスシャドウ
</div>
<div class="box ドロップシャドウ">
    <i class="cor"></i>
    フィルター: ドロップシャドウ
</div> 

CSS3 フィルター: ドロップシャドウとボックスシャドウの違いと用途に関するこの記事はこれで終わりです。CSS3 フィルター: ドロップシャドウとボックスシャドウに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。