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);

Answer 1

使用此article或此代码：

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

Answer 2

我只需删除供应商前缀行，就可以在IE9和FF中工作了。你需要的只是：

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

Answer 3

阴影大小为负值：

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

否定14px阴影将无效，因为它会小于它的大小0.如果您正在寻找inset阴影，只需将其添加到样式：< / p>

box-shadow: inset...

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

Answer 4

在您的CSS中使用以下示例：

-webkit-box-shadow: -1px 6px 13px 0px rgba(0,0,0,0.44);
-moz-box-shadow: -1px 6px 13px 0px rgba(0,0,0,0.44);
box-shadow: -1px 6px 13px 0px rgba(0,0,0,0.44);

您可以使用此ONLINE APP来进行游戏，并为您的设计找出合适的阴影图案。

如何创建白色css框阴影

4 个答案: