CSS3 フィルター: ドロップシャドウ フィルターとボックスシャドウの違い application_html/css_WEB-ITnose

この記事は 2016 年 5 月 18 日水曜日 01:07 に公開され、css 関連に分類されます。 今日も 65 回読みました

byzhangxinxu (http://www.zhangxinxu.com より)

記事のアドレス: http://www.zhangxinxu.com/wordpress/?p =5380

標準 CSS3 を使用して要素の影効果を実現するには、2 つの方法があります。1 つ目は共通の box-shadow を使用する方法で、2 つ目は CSS3 フィルター シャドウを使用する方法です。フィルター、ドロップシャドウ、これら 2 つのシャドウ実装の具体的な違いは何ですか?

1. 異なる互換性

CSS3 ボックスシャドウは、以下に示すように IE9 ブラウザーからサポートされています。

フィルターのドロップシャドウは IE13 でのみ使用可能になりました。モバイル端末の Android 4.4 がサポートされ始めたばかりで、よく考えてみると、明日の今日、誰もがモバイル端末で楽しく使えるようになるまで、あと一息なのです。ダンス:

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

フィルター内のドロップシャドウの構文は次のとおりです:

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

例:

filter:drop-shadow(5px 5px 10px black)

は、右下から 5 ピクセルのオフセット、10 ピクセルのぼかした黒い影を意味します。百聞は一見に如かず、下の図を見てください (リアルタイム効果を得るには、Chrome またはモバイル ブラウザを使用してください):

ただし、同じパラメータ値で box-shadow を使用する場合、たとえば:

box-shadow: 5px 5px 10px black;

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

3. Drop-shadow にはインナー シャドウ効果がありません

box-シャドウは、次のようなインセット インナー シャドウをサポートします。

box-shadow: inset 5px 5px 10px black;

ただし、ドロップ シャドウはサポートしません。

4. Drop-shadow は影を重ねることができません

Box-shadow は、任意に影を蓄積できるという非常に優れた機能を備えています。チャン・ハンユンの若い頃の写真など、任意の画像を生成します。 詳細については、「CSS3 ボックス - シャドウ ボックス シャドウ グラフィックス生成技術」を参照してください。

しかし、フィルターのドロップシャドウについては謝罪することしかできません。私は 1 回限りの取引です。お金がなくてもこんなにワガママになれる！

今のところ言えることは、ドロップシャドウが不十分、互換性が不十分、インナーシャドウがサポートされていない、マルチシャドウがサポートされていない、ということだけです。 、恋に破れ、仕事もなくなった、存在の意味がバイ・フメイの話題になっているようだ。

本当にそうなのでしょうか？明らかに違います！いわゆる存在には意味があります。

ドロップシャドウには非常に強力な機能があり、この 1 つの機能だけで将来的に活躍する機会が十分にあります。つまり、drop-shadow は真のシャドウですが、box-shadow は単なるボックス シャドウです。

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

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

実践すると真の知識が得られます。以下では、CSS ボーダーを使用して点線のボックスを記述します。例:

border: 10px dashed #beceeb;

結果は次のようになります。

次に、ボックス シャドウ フィルターとドロップ シャドウ フィルターをそれぞれ適用します:

border: 10px dashed #beceeb; box-shadow: 5px 5px 10px black;

border: 10px dashed #beceeb; filter: drop-shadow(5px 5px 10px black);

結果:

どうでしょうか?あなたの本性が暴かれてしまったのでしょうか？

box-shadow は、名前が「ボックスの影」を意味するように、ボックスの影です。よく考えてみると、影が付いているとき、ボックスの中央は明らかに透明になります。キャスト、光は透過しませんが、ドロップシャドウ 現実世界の投影に合わせて、透明な部分には不透明な色の投影があり、光は透過しますが、ボックスは存在しません。箱かどうかは私には関係ありません。

ドロップシャドウは、コードによって構築された要素の透明な部分だけでなく、以下に示すように PNG 画像の透明な部分にも侵入できます。

したがって、一度私たちを悩ませてきた長年の問題のいくつかには、良い解決策があります。

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

互換性を考慮して、矢印を指すオーバーレイ パネルを実装する場合、三角形は基本的にボーダーを使用して描画され、ボックス化する方法はありません。影はありますが、設計者は長方形の部分に影があることを期待しているため、次の図に示す状況が発生します。

矢印には影がなく、回避されます。

その後、長方形を 45 度回転させて 2 つのボックスシャドウを結合するという別の方法を思いつきました。ただし、正直に言うと、影が重なる部分があります。まだ完璧ではありません。

さて、ドロップシャドウを使用すると、影が本当に影になります。

ここをクリックできます: filter:drop-shadow は鋭い角と影を備えたプロンプト パネルのデモを実装します

すべてがスクリーンショットにあります:

7 . 結論

IE ブラウザの下位バージョンには、実際にはシャドウ フィルターがありますが、これは IE のプライベート フィルターです。 IE9+ と互換性のある投影効果を実現したい場合は、おそらく SVG を使用してそれを実現する必要があります。

ドロップシャドウ機能は本当に素晴らしいです。ビットマップのカラー グラデーション アニメーションの実装や、デザイナーやフロントエンドの学生の作業コストを削減できるその他の技術的な実装のアイデアなど、私はすでに多くの素晴らしいアイデアを持っています。 、今は秘密にしておいて、私が最初に練習して、アイデアが成熟したら一緒にコミュニケーションしましょう。

全体として、ドロップシャドウ フィルターにはハイライトが 1 つありますが、このハイライトは北半球全体を照らすことができます。

読んでいただきありがとうございます。コミュニケーションを歓迎します!

この記事はスクリプトの動作を含むオリジナルの記事であり、ナレッジポイントは頻繁に更新され、いくつかのエラーは修正されます。したがって、再印刷する場合は、古いものや間違ったものによる誤解を避けるために、元のソースを保持してください。知識を深め、より良い読書体験を。

この記事の URL: http://www.zhangxinxu.com/wordpress/?p=5380

(この記事はここまで)