CSS阴影DIV

的四面我想在CSS实现这一点 - 因为我希望它所有的浏览器 bg with shadows on all sides http://img831.imageshack.us/img831/5339/27900717.png CSS阴影DIV

即包含分区的内容支持，对每一侧的阴影不会CSS3。顶部区域将用于导航。我已经搜索了教程，但迄今无济于事。帮帮我！

来源

2010-08-12 Sean McRaghty

伤心，但IE不显示用CSS做的阴影。你需要创建图像作为阴影（一些GIF，IE6不显示alpha通道的PNG文件） – Ventus 2010-08-12 12:15:37

这是一个动态框...意思是宽度/高度每一个变化取决于内容？ – Hristo 2010-08-12 13:20:55

对于跨浏览器兼容性仅使用CSS的阴影...检查这些链接
http://dev.opera.com/articles/view/cross-browser-box-shadows/
http://coolhomepages.com /How-to-make-easy-gradient-shadow-CSS-DIV-boxes/blog-48.html – Lemdor 2012-10-14 09:58:52

正如Ventus所说不可能使用css阴影与ie（仅ie9）。但您可以使用shadowOn。这是一个很棒的jQuery插件，使用起来非常简单。有了它，你将有跨浏览器兼容性。

来源

2010-08-12 12:48:32 Sotiris

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

来源

2010-08-12 12:13:21 Knarf

您可以用三个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-12 12:20:52 fredley

或者，也可以使一个大的图像，并用其作为背景的整个内容区域;然后对包含的元素的位置和大小进行硬编码。

来源

2010-08-12 12:21:49 tdammers

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

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

至于标记，例如，我看到只有2个元素，其中最上面的元素右移。你必须玩z-index来隐藏多余的阴影。在那个网站中也有一个非常相似的效果，你应该能够适应你的需求。

来源

2010-08-12 12:30:54 Razor

很好的参考。我已经在几个月前使用过它，但由于某些原因，我离开了它。谢谢你提醒它！ – Sotiris 2010-08-12 13:45:41

这应该在所有的浏览器：

 

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

来源

2011-08-03 00:27:37 Ivelin

盒阴影适用于所有近代[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开始支持的箱影。

来源

2011-10-25 10:58:27 VKGS

box-shadow在IE8中不起作用。 – certainlyakey 2012-12-23 20:45:23

@certainlyakey感谢您指出，我已更新样式，以使其在IE中工作。 – VKGS 2013-01-10 10:19:15

只有最后一个过滤器正在申请我。为了在IE8中为我工作，我必须删除逗号。根据MSDN的以下文章，它们被一个空格分隔，而不是一个逗号：http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx – knighter 2015-03-09 20:59:36

发表谢卡尔答案，需要一点点的编辑，

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-20 06:08:09

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

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

来源

2014-08-14 18:38:44 yPhil

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

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

取而代之的5px的使用尺寸。

来源

2014-09-20 13:26:55

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

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

来源

2015-10-03 08:39:31

下线对我有用。我使用了尺寸为600x600的图片。

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

来源

2016-12-17 07:27:39

回答

相关问题