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

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

1

于 2012-09-06T10:09:33.290 回答

2 回答 2