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

【问题标题】：Get the same shadow in all modern browsers (except IE version 9)在所有现代浏览器中获得相同的阴影（IE 版本 9 除外）
【发布时间】：2012-09-05 15:21:51
【问题描述】：

我一直试图在所有现代浏览器（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;
}

至少在最新版本的 Firefox、Google Chrome、Safari 和 Opera 中，我能做些什么来获得相同的阴影？感谢您的想法！

【问题讨论】：

dowebsitesneedtolookexactlythesameineverybrowser.com
通常情况下，我也会是那种会发布这样的链接的人 ;-) 但在这种情况下，它很重要，因为阴影将与放置的图片相结合在它旁边继续阴影.. 在 chrome 中，模糊/扩散效果不一样。
基本问题：浏览器使用不同的渲染引擎（令人震惊地）以不同的方式渲染事物。试图让浏览器呈现完美像素的页面总是会让人感到沮丧。在您的情况下，您最好重做图形，以便浏览器也呈现连续阴影（可能是另一个框阴影，或使用 SVG 或画布完成。这更有可能让您获得一致的外观。
顺便说一句——您可能还应该在 mac 和移动设备上的浏览器中进行测试，因为它们的呈现方式也可能不同。

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

【讨论】：