每面不同大小的盒子阴影

Question

我目前正致力于设计，设计师在div上使用阴影。 由于我不喜欢将图像用于此类事情，因此我决定将我的CSS技能提升到一个新的水平。我对CSS3完全不熟悉，但我想尝试使用box-shadow。我一直在阅读这个新功能，但我似乎无法让我的确切设计正常工作。

这就是我要搜索的内容：

上：1px; 右：5px; 下图：9px; 左：5px

设计师使用不同的点差（好吧，我相信在这种情况下称为点差）。我的问题是，我不能设法让div的每一面使用不同的点差，任何人都可以帮助我吗？

提前致谢。

div {
    box-shadow: 0px 0px 5px #000;
}

Answer 1

box-shadow的意图是创建一个你分配给它的div的阴影。您无法使特定的左上角 - 右下角部分变大或变小

请参阅：http://css3gen.com/box-shadow/

这样做的唯一方法就是摆弄变量

例如：

box-shadow: 0px 9px 15px 5px #888888;

此框阴影将生成一个框阴影..

• [0px]不向左或向右移动
• [9px]是9px down
• [15px]具有15px的模糊效果（为了达到预期的效果而使用它）
• [5px]宽5px（四面）
• [＃888888]颜色为灰色

另一种方法是使用边框图像。

Answer 2

这非常接近：http://jsfiddle.net/EG6FA/

div {
    ...
    box-shadow: 0px 4px 10px #777;
}​

Answer 3

-webkit-box-shadow: 0px 0px 10px 5px #888888;
-moz-box-shadow: 0px 0px 10px 5px #888888;
box-shadow: 0px 0px 10px 5px #888888;

（IE9和IE10将呈现较小的盒子阴影。较早的资源管理器版本将不显示阴影。）