如何最佳实现这种类型的投影效果？

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

有没有更好的方法来做这件事？谢谢！

- Chris Cummings

---

您需要使用CSS3 Transforms来实现这种类型的阴影，但它很混乱且支持不佳！ - Zuul

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

做了一个JSFiddle示例！

- Zuul

---

哇，太棒了...我不知道你可以用CSS做这些事情！比我的解决方案更优雅...谢谢（还有感谢提供链接！） - Chris Cummings

CSS3 确实彻底改变了网页设计的风格 :) - Zuul

你不讨厌在提交简单答案时，页面重新加载出像这样的东西吗？还有一个很棒的链接，朋友，+1。 - Rick Donohoe

Answer 2

你可以使用 box-shadow：

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

这将产生类似的效果，但它不会完全相同。

关于此的一些信息。

- zakutnya

Answer 3

大致上是这样的

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

底部的额外填充使背景能够处于正确的位置。

这有帮助吗？

- Rick Donohoe