每面不同尺寸的箱形阴影

我目前正在基于一个设计，其中设计师在div上使用了一个阴影。由于我不喜欢使用图像这种事情，我决定把我的CSS技能提高到一个新的水平。我对CSS3完全陌生，但我想用box-shadow来尝试一下。我一直在阅读这个新功能，但我似乎无法让我的确切设计工作。每面不同尺寸的箱形阴影

这就是我正在寻找：

enter image description here

上：1px的; 右：5px; 底部：9px; Left：5px

设计师为阴影使用了不同的点差（当然，我相信它被称为点差）。我的问题是，我不能设法使用div的每边不同的价差，任何人都可以帮助我吗？

在此先感谢。

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

2012-11-06 Aquillo

box-shadow的用意是创建你指定给它的div的阴影。你不能让特定的左上角，右下角部分更大或更小

可以做到这一点的唯一方法是用变量

例如拨弄：

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

这箱阴影将产生的box-shadow的..

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

2012-11-06 20:25:54 Biketire

嗯，我的想法。我本来希望能够以某种我没有读到的方式。感谢您的努力，我会考虑使用像box-shadow：0px 3px 7px＃000这样的作弊手段来接近设计师的想法或使用图像。 – Aquillo

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

2012-11-06 23:50:42 Shmiddty

0px 4px 5px是我正在寻找的确切值。由于零，左和右将是定义5.顶部将是5减4是1和底部将是5加4是9.虽然，这意味着底部的前4个像素不是'衰落' 。但是这会产生一个很好的视觉效果。 – Aquillo

参数是'box-shadow：;'所以如果你这样做，说'box-shadow：0 4px 0 5px＃777'你会有一个坚实的盒子代表你想要的阴影边界。然后，您可以使用模糊半径来获得您想要的外观。 – Shmiddty

-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将呈现一个小的box-shadow早些时候Explorer版本会显示没有影子。）

2012-11-30 01:19:56

回答