7

常に同じサイズの画像と 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;
}

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

4

3 に答える 3

11

CSS を使用してそのタイプの影を作成したい場合は、ここに示すように CSS3 を使用できます。

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);
}

フィドルを作った！

于 2012-05-10T20:14:03.010 に答える
0

の線に沿った何か

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

下部の余分なパディングにより、背景を正しい場所に配置できます。

それは役に立ちますか？

于 2012-05-10T20:21:13.440 に答える
0

使用できますbox-shadow：

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

これにより同様の効果が得られますが、見た目はまったく同じではありません。

それに関するいくつかの情報。

于 2012-05-10T20:12:00.287 に答える