Html CSS阴影div的所有四个边
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3467452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Shadows all four sides of div
提问by Sean McRaghty
I want to achieve this in CSS - not CSS3 as I want it to be supported by all browsers
我想在 CSS 中实现这一点 - 而不是 CSS3，因为我希望所有浏览器都支持它
ie a div containing content, with the shadows on every side. The top area will be used for navigation. I have searched for tutorials but so far to no avail. Help!
即包含内容的 div，每边都有阴影。顶部区域将用于导航。我已经搜索了教程，但到目前为止无济于事。帮助！
采纳答案by Sotiris
回答by vkGunasekaran
Box Shadow works in all mordern [IE>8] browsers, This code uses no images and works in all browsers in IE versions below 9.
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);
Box shadow supported from IE 9 onwards.
从 IE 9 开始支持框阴影。
回答by Razor
CSS3pieis a tool that lets you use some css3 properties in IE.
CSS3pie是一个工具，可让您在 IE 中使用某些 css3 属性。
What you're trying to do is fairly widespread css3 in newer browsers, and emulated really well (and easily) in IE with the .htc file you can download from there.
您正在尝试做的是在较新的浏览器中相当普遍的 css3，并且在 IE 中使用可以从那里下载的 .htc 文件在 IE 中模拟得非常好（并且很容易）。
As for the markup, I see just 2 elements, with the top one floated right, for example. You'd have to play with z-index to hide excess shadows. In that site there's also a very similar effect, you should be able to adapt it for your needs.
至于标记，我只看到 2 个元素，例如，顶部浮动的元素。您必须使用 z-index 来隐藏多余的阴影。在该站点中也有非常相似的效果，您应该能够根据自己的需要进行调整。
回答by Ivelin
This should work in all browsers:
这应该适用于所有浏览器：
.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)
";
}
回答by Prabhat Ranjan
The answer posted by Sekar, needs a little editing,
Sekar 发布的答案，需要稍微编辑一下，
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
this doesnot work on IE(I checked on IE8).
这在 IE 上不起作用（我在 IE8 上检查过）。
回答by yPhil
box-shadow: inset 0 0 3px 0 #000;
Means 0 pixel left, 0 pixel right, 3px blur, 0 pixel diffuse, use a color slightly darker than the BGs.
表示左 0 像素，右 0 像素，3 像素模糊，0 像素漫射，使用比 BG 稍暗的颜色。
回答by ravish.hacker
I cant see your picture now, but for all side shadows I use the below code:
我现在看不到你的照片，但对于所有侧面阴影，我使用以下代码：
box-shadow: 0 0 5px 0 #000;
Instead of the 5px use your size.
而不是 5px 使用您的大小。
回答by Ron
You can place the following code in the div in order to drop shadows on all four sides.
您可以将以下代码放在 div 中，以便在所有四个边上放置阴影。
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
回答by suketup
Below line worked for me. I used an image with dimensions 600x600.
下面的线对我有用。我使用了尺寸为 600x600 的图像。
-webkit-filter: drop-shadow(-10px 8px 30px #000) !important;
回答by Knarf
You have to create several images. One for the left side. One for the right. One for the bottom, etc. And then have several div's and set the background for each of them.
您必须创建多个图像。一个用于左侧。一为右。一个用于底部等。然后有几个 div 并为每个 div 设置背景。
