我有一个网站将有一列图像和div(两者的混合),总是相同的大小.
在所有这些我想添加某种投影(如此处所示)：
我曾经使用CSS投影,但我从来没有在CSS中看到过这样的人.这可以在CSS中完成吗？假设它不能,那么我猜我只会使用阴影切片作为图形,可能是背景.如果这是唯一的路线,我该如何将其应用于每个图像或div？
现在我正在做的是在每个图像或div下面放一个div：
<div class="rightimgdropshadow"> </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;
}
有一个更好的方法吗？谢谢！
解决方法
如果您更喜欢使用CSS来创建该类型的阴影,则可以将CSS3用作
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.7);
-moz-Box-shadow:0 15px 10px rgba(0,0.7);
Box-shadow:0 15px 10px rgba(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);
}
