html - 在所有现代浏览器中获得相同的阴影(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;
}

这是一个 fiddle : http://jsfiddle.net/hLp8J/1/

我该怎么做才能至少在最新版本的 Firefox、Google Chrome、Safari 和 Opera 中获得相同的阴影？感谢您的想法!

Answer 1

不同的渲染引擎绘制阴影略有不同(例如，Firefox 的衰减比基于 Webkit 的浏览器更平滑，如果你问我看起来更好)

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

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