如何创建白色CSS盒阴影

Question

我在站点上使用了以下的盒子阴影CSS。它在Chrome浏览器上看起来很不错，但是在Firefox和IE中无法实现我想要的效果。我希望一个盒子只有底部有一个白色的实心阴影。如何让所有浏览器都显示这个效果？

box-shadow: 0px 10px -14px 14px #FFF;
-webkit-box-shadow: 0px 10px -14px 14px #FFF;
-moz-box-shadow: 0px 10px -14px 14px rgb(255, 255, 255);

- JoshP

Answer 1

使用此文章或此代码：

 -moz-box-shadow: 13px 13px 0px 0px #FFFFFF;
    -webkit-box-shadow: 13px 13px 0px 0px #FFFFFF;
     box-shadow: 13px 13px 0px 0px  #FFFFFF;

- user1968030

Answer 2

我已经使它能在IE9和FF中正常运行，只需简单地删除供应商前缀行即可。你所需要的就是：

box-shadow: 0px 10px -14px 14px #FFF;

- middleinitial

Answer 3

阴影大小的值为负数：

box-shadow: 0px 10px -14px 14px #FFF;

一个负的 14px 的阴影是没有效果的，因为它比大小为0还小。如果你想要一个内阴影，只需将其添加到样式中：

box-shadow: inset...

解决方案，将-14px更改为14px。

- Charlie