在所有现代浏览器中获得相同的阴影（IE 9除外）

Question

我一直在尝试在所有现代浏览器中获得相同的影子（IE 9除外）。 不幸的是，例如Google Chrome并没有像Firefox那样模糊。

这是我的代码..

HTML：

<div id="box">Every browser should see my shadow the same way!</div>

CSS：

#box {
    box-shadow: 0 4px 4px -4px #000, 4px 0 0 0 #E8EBEF;
    padding: 10px;
    background-color: #E8EBEF;
    width: 200px;
}

这是一个小提琴： http://jsfiddle.net/hLp8J/1/

我至少可以在最新版本的Firefox，Google Chrome，Safari和Opera中获得相同的影子？谢谢你的想法！

Answer 1

不同的渲染引擎稍微不同地绘制阴影（例如，Firefox比基于Webkit的浏览器具有更平滑的衰减，如果你问我，看起来会更好）

保证它在浏览器中看起来相同的唯一方法是对它愚蠢并使用图像。

否则，您需要找到一种方法来处理细微的差异，而不会对您的设计产生负面影响。

Answer 2

您可以在线试用 CSS3 Generator 或 CSS3 Box Shadow Generator 或 CSS3 Maker