CSSドロップシャドウ効果

皆さんの多くは、サイト上の画像の二重/非標準のフレームワークを作成するタスクに直面していると思います。 一部では、このようなフレームワークを作成するためのテクニックをここで説明しました 。 しかし、私はその記事に言及しませんでした（そして正直に言うと、私自身はそれについて考えませんでした）。

この手法を使用すると、文字通り数行で画像の影効果を作成できます。 何をする必要がありますか？

まず、画像のダブル/カスタムフレームを作成するには、画像のインデント幅を1pxに設定し、色と太さのパラメーターで境界線を設定するか、コンテナーに画像を配置し、コンテナーのインデントと背景画像を設定する必要があることを思い出させてください

この場合、すべてがよりシンプルになります。 画像のパディングと境界線を、4と背景ではなく、2つの側面から設定する必要があります。 たとえば、次のように：

  .shadow {
 border-bottom：2px solid #eee;
ボーダー右：2pxソリッド#eee;
 padding-bottom：2px;
パディング右：2px;
背景：#ccc;
 } 

以下に例を示します。



白い背景の写真では、見た目どおりに見えるかどうかはわかりませんが、それでも:)

等しく成功した場合、背景画像を設定し、その位置で遊んでこれを行うことができます。

当然、目的の効果を達成するために実験することが可能であり、必要ですが、その本質は明らかです。

PS Internet Explorer 6のQuircksモードでのimgのパディングは機能しませんが、Quircksモードで作業している場合、これが問題です:)