Firefox和Chromium上的CSS box-shadow会有所不同 [英] CSS box-shadow renders different on Firefox and Chromium

问题描述

我正在考虑依靠 box-shadow ，但即使在Firefox和Chrome / Chromium上，它也呈现不同的效果。这个差异很小，值很低，但在较大值时非常明显。

在）。

I'm thinking on relying on box-shadow but it renders differently even on Firefox and Chrome/Chromium. The difference is very subtle with low values, but very noticeable with bigger ones.

In this example, you can see the differences arise when using negative values to make the shadow smaller. Left render is Chromium 25, right is Firefox 21.

HTML:

<div>
  Hello there!
</div>

CSS:

div{
  margin:100px;
  padding:100px;
  border:1px solid red;
  box-shadow:0 80px 15px -85px #000;
}

How can I workaround this problem? Or maybe I should drop box-shadow by now?

解决方案

Browsers use different algorithms to generate the shadow blur, in Chrome the opacity of shadow pixels decreases more quickly from the inner edge of the shadow area to the outer, and since the inner 1/3 of the shadow is hidden under the box in this example, it appears to look as having different start color. If we make the blur entirely visible by reducing the blur radius and the negative spread distance by 5px, and replace the solid shadow color with semi-transparent rgba(), the difference in the rendering becomes much less significant (demo).

这篇关于Firefox和Chromium上的CSS box-shadow会有所不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！