如何在图像的四个边上放置阴影？

Question

我需要知道如何在div的四个方面放置阴影。我需要一点解释：

过滤器：   的progid：DXImageTransform.Microsoft.Shadow

Answer 1

这将给你所有四面的阴影：

div.shadow {
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

JSFiddle

前两个0px表示阴影不会明确地向左/向右或向上/向下突出。 10px赋予它足够的模糊以突出所有边缘。 #000是阴影的颜色。你可以玩它来获得你喜欢的样子。

Answer 2

使用box-shadow

.class-name{

   box-shadow: 2px 2px 2px #000;   
             /* horizontal, vertical, blurr-radius, colour  */


}

Answer 3

箱阴影

CSS3 box-shadow属性具有以下属性：（W3Schools）

box-shadow: h-shadow v-shadow blur spread color inset;

支持最新浏览器的影子的主要前缀为box-shadow。

我建议将其他2个前缀用于较旧的Mozilla和Webkit：

• -moz-box-shadow
• -webkit-box-shadow

试一试：

img{
     -webkit-box-shadow: 0 0 5px 2px #000000;
     -moz-box-shadow: 0 0 5px 2px #000000;
     box-shadow: 0 0 5px 2px #000000;
}

Working Demo

Reference