html - 方框阴影 : different shadow in same div

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 来使用 inner box-shadow 并创建您想要的所有内容。(即 0 0 5px 2px #fff inset )