CSS box shadow仅在mozilla中出现？

Question

我的网站上有一个页脚,我想在它上面画一个微妙的阴影.CSS看起来像这样:

div.footer {
  -webkit-box-shadow: 0px 0px 7px $dark2;
  -moz-box-shadow: -7px 0px 7px $dark2;
  box-shadow: 0px 0px 7px $dark2;
}

因为我确信你们都熟悉,所以Mozilla会扩展页面来渲染一个盒子阴影的全部范围,如果你有100%宽的元素,例如我的页脚,这就是一个问题.

我已经调整了moz声明来防止水平滚动条,(我在我的网站上也在我的网站上做了这个),但当我把它放在我的页脚上时,我发现Mozilla将页面延伸到底部的页脚7px .我对此感到惊讶,因为它没有将页面垂直延伸到页面顶部的菜单栏...

那么,有没有人有一个解决方案,在Firefox中渲染一个顶级的盒子阴影？

编辑:请看这个小提琴:http://jsfiddle.net/burlesona/2LwXa/

Answer 1

试试box-shadow: 0px -7px 7px -7px #333;.

第四个值是阴影的扩散.负值会导致阴影缩小.结合模糊,它会产生与元素大小相同的阴影,offset-y然后移动到视图中.