Question

我的箱子阴影中有一种奇怪的行为。

在我的代码中我有这个：

-moz-box-shadow: 0 0 3px 3px #d1d3da;
-webkit-box-shadow: 0 0 3px 3px #d1d3da;
box-shadow: 0 0 3px 3px #d1d3da;

这很好用，但是当我使用

为标题栏添加背景图片时

 background: #e7ebf4 url('http://imageshack.com/a/img673/4873/qv8bpR.png') repeat-x;

阴影有所不同。

可以找到一个例子 http://jsfiddle.net/wouterdr/1txww2ps/

深蓝色条纹的部分有较小/较浅的阴影。另一部分有更大的影子。

我们希望在整个div上有相同的阴影（最好是浅蓝色部分旁边的阴影。

非常感谢！

Answer 1

您可以使用两个或多个用,分隔的框阴影，如下所示：

-moz-box-shadow: 0 0 3px 3px #d1d3da, 0 0 5px 2px #fff;
-webkit-box-shadow: 0 0 3px 3px #d1d3da, 0 0 5px 2px #fff;
box-shadow: 0 0 3px 3px #d1d3da, 0 0 5px 2px #fff;

并且您还可以通过在语法末尾添加inset来创建内部阴影，并创建您想要的所有内容。（即0 0 5px 2px #fff inset）

Answer 2

阴影看起来很好，但是使用repeat-x你只会水平重复。为了在x和y轴上重复，只需使用＆＃34;重复＆＃34;像这样：

background: #e7ebf4 url('http://placehold.it/25x25') repeat;

仅供参考，您可以使用http://placehold.it/100x100动态创建任意大小的图像。只需改变尺寸，200x200也可以使用，等等。

Box Shadow：同一div中的不同阴影

2 个答案: