この種のドロップシャドウを行う最も良い方法は？

Question

私は画像とdiv（両方の組み合わせ）の列を持ち、常に同じサイズになるサイトを持っています。私は（ここに見られるように）ドロップシャドウの特定の種類を追加するこれらのすべてに

：

私はCSSのドロップシャドウで働いてきたが、私はCSSでこのようなものを見たことがありません。 CSSでこれを行うことはできますか？それができないとすれば、私はドロップシャドウスライスをグラフィック、おそらくバックグラウンドとして使うと思います。それが唯一のルートだとすれば、どのようにこれをすべての画像やdivに適用すればよいですか？今

私がやっていることは、各画像の下のdivを置くか、DIVされています

<div class="rightimgdropshadow">&nbsp;</div> 

...とCSSでこれを行う：

.rightimgdropshadow

{ 
    background-image: url(../images/site-structure/right-col-image-shadow.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
    width 100% 
    height: 20px; 
} 

することはありますこれを行うより良い方法は？ありがとう！

Answer 1

、あなたはseen here!

CSS

/* Lifted corners */ 

.lifted { 
    -moz-border-radius:4px; 
     border-radius:4px; 
} 

.lifted:before, 
.lifted:after { 
    bottom:15px; 
    left:10px; 
    width:50%; 
    height:20%; 
    max-width:300px; 
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
     -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
      box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -webkit-transform:rotate(-3deg);  
     -moz-transform:rotate(-3deg); 
     -ms-transform:rotate(-3deg); 
     -o-transform:rotate(-3deg); 
      transform:rotate(-3deg); 
} 

.lifted:after { 
    right:10px; 
    left:auto; 
    -webkit-transform:rotate(3deg); 
     -moz-transform:rotate(3deg); 
     -ms-transform:rotate(3deg); 
     -o-transform:rotate(3deg); 
      transform:rotate(3deg); 
} 

Made a Fiddle!

Answer 2

あなたはbox-shadowを使用することができます。

.rightimgdropshadow { 
    box-shadow: 0px 2px 3px rgba(0,0,0,.3); 
} 

これは、同様の効果を作成しますが、それはちょうど同じように見えません。

Some infoです。あなたは影のそのタイプを作成するためにCSSを使用するprefere場合

Answer 3

として

の線に沿って何かをCSS3を使用することができます

border: 1px solid #333; 
border-bottom: none; 
padding: 10px 10px 20px; 
background: url('insert_image') no-repeat; 
background-position: left bottom; 

下部に余分なパディングがあると、背景が正しい場所に置かれます。

これは役に立ちますか？