做这种阴影的最佳方法？答案

【问题标题】：Best way to do this kind of drop shadow?做这种阴影的最佳方法？
【发布时间】：2012-05-10 20:04:39
【问题描述】：

我有一个网站，其中有一列图像和 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;
}

有没有更好的方法来做到这一点？谢谢！

【问题讨论】：

你需要使用 CSS3 Transforms 来实现那种类型的阴影，但是它很乱而且支持很差！

标签： css drop-shadow

【解决方案1】：

如果你更喜欢使用 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, 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!

【讨论】：

哇，太好了...我不知道你可以用 CSS 做这些！比我的解决方案优雅得多......谢谢（也感谢它的链接！）
CSS3 真的来震撼网络 :)
当你提交一个简单的答案时，你不讨厌它，并且当你提交页面时会重新加载这样好的东西；）甜蜜的链接太伙伴了，+1

【解决方案2】：

类似的东西

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

底部的额外填充可让背景位于正确的位置。

这有帮助吗？

【讨论】：

【解决方案3】：

你可以使用box-shadow:

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

这会产生类似的效果，但看起来不一样。

Some info 那个。

【讨论】：