11

我想在 CSS 中实现这一点 - 而不是 CSS3，因为我希望所有浏览器都支持它 bg 四面都有阴影

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

4

11 回答 11

18

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

 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 开始支持盒子阴影。

于 2011-10-25T10:58:27.633 回答
4

CSS3pie是一个可以让你在 IE 中使用一些 css3 属性的工具。

您正在尝试做的是在较新的浏览器中相当普遍的 css3，并在 IE 中使用可以从那里下载的 .htc 文件很好地（并且很容易地）模拟。

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

于 2010-08-12T12:30:54.000 回答
3

这应该适用于所有浏览器：

    .allSidesShadow {
        盒子阴影：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;

        /* 对于 IE 5.5 - 7 */
        /* IE4 - IE7 */
        筛选：
            progid：DXImageTransform.Microsoft.Shadow（强度=9，方向=1，颜色=#C4C4C4），
            progid：DXImageTransform.Microsoft.Shadow（强度=9，方向=90，颜色=#C4C4C4），
            progid：DXImageTransform.Microsoft.Shadow（强度=9，方向=180，颜色=#C4C4C4），
            progid:DXImageTransform.Microsoft.Shadow（强度=9，方向=270，颜色=#C4C4C4）；
        -ms-过滤器：“
            progid：DXImageTransform.Microsoft.Shadow（强度=9，方向=1，颜色=#C4C4C4），
            progid：DXImageTransform.Microsoft.Shadow（强度=9，方向=90，颜色=#C4C4C4），
            progid：DXImageTransform.Microsoft.Shadow（强度=9，方向=180，颜色=#C4C4C4），
            progid:DXImageTransform.Microsoft.Shadow（强度=9，方向=270，颜色=#C4C4C4）
        ";
    }
于 2011-08-03T00:27:37.193 回答
1

正如 Ventus 所说，无法将 css 阴影与 ie 一起使用（仅 ie9）。但是你可以使用shadowOn。这是一个很棒的 jquery 插件并且非常易于使用。有了它，您将拥有跨浏览器兼容性。

于 2010-08-12T12:48:32.133 回答
1

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 上检查过）。

于 2012-07-20T06:08:09.487 回答
1 
box-shadow: inset 0 0 3px 0 #000;

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

于 2014-08-14T18:38:44.363 回答
1

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

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

而不是 5px 使用您的大小。

于 2014-09-20T13:26:55.360 回答
0

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

于 2010-08-12T12:13:21.853 回答
0

您可以使用三个 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;
}
于 2010-08-12T12:20:52.527 回答
0

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

于 2010-08-12T12:21:49.727 回答
0

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

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
于 2015-10-03T08:39:31.313 回答