做这种投影的最佳方法是什么？

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

如果您喜欢使用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);
}

做了一个小提琴!