Question

我想在CSS中实现这一点 - 而不是CSS3，因为我希望所有浏览器都支持它 bg with shadows on all sides http://img831.imageshack.us/img831/5339/27900717.png

即包含内容的div，每边都有阴影。顶部区域将用于导航。我已经搜索了教程，但到目前为止无济于事。救命啊！

Answer 1

Box Shadow适用于所有现代[IE> 8]浏览器，此代码不使用任何图像，适用于9以下IE版本的所有浏览器。

 box-shadow:2px 2px 10px 10px #C9C9C9;
 -webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
 -moz-box-shadow:2px 2px 10px 10px #C9C9C9;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);

从IE 9开始支持Box shadow。

Answer 2

CSS3pie是一个允许您在IE中使用某些css3属性的工具。

你想要做的是在较新的浏览器中相当普遍的css3，并且在IE中使用你可以从那里下载的.htc文件模拟得非常好（并且很容易）。

至于标记，我只看到2个元素，例如顶部的一个元素向右浮动。您必须使用z-index来隐藏多余的阴影。在该网站中也有类似的效果，您应该能够根据自己的需要进行调整。

Answer 3

这适用于所有浏览器：


    .allSidesShadow {
        box-shadow: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;

        /* For IE 5.5 - 7 */
        /* for IE4 - IE7 */
        filter:
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
        -ms-filter: "
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
        ";
    }

Answer 4

正如Ventus所说，不能使用ie（只有ie9）的css阴影。但您可以使用shadowOn。这是一个很棒的jquery插件，非常容易使用。有了它，您将具有跨浏览器兼容性。

Answer 5

Sekar发布的答案，需要一点编辑，

box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

这不适用于IE（我在IE8上查看过）。

Answer 6

box-shadow: inset 0 0 3px 0 #000;

表示0像素左，0像素右，3像素模糊，0像素漫反射，使用比BG稍暗的颜色。

Answer 7

我现在无法看到你的照片，但对于所有的阴影，我使用下面的代码：

box-shadow: 0 0 5px 0 #000;

而不是5px使用你的尺寸。

Answer 8

您必须创建多个图像。一个用于左侧。一个是对的。一个用于底部等，然后有几个div并为每个div设置背景。

Answer 9

你可以用三个div来做这个，假设它们都是相同的（固定的）宽度：

<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>

.top{
  background:url('top.png');
  height:20px;
  width:800px;
}
.middle{
  background:url('middle.png') repeat-y;
  width:800px;
  }
.bottom{
  background:url('bottom.png');
  height:20px;
  width:800px;
}

Answer 10

或者，您可以制作一个大图像，并将其用作整个内容区域的背景;然后硬编码所包含元素的位置和大小。

Answer 11

您可以将以下代码放在div中，以便在所有四个边上投下阴影。

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);

Answer 12

以下为我工作。我使用尺寸为600x600的图像。

-webkit-filter: drop-shadow(-10px 8px 30px #000) !important;

CSS影响div的所有四个方面

12 个答案: