我有以下框形阴影:

box-shadow: -.4px .3px .1px .1px #009989;


哪个在Chrome中按预期方式呈现,如下所示:



但是在Firefox中这样:



在Safari中,它根本不适用。
浏览器前缀被完全忽略,因为它们不再适用(!important也无效)。
跨浏览器获得理想结果的常见解决方案是什么?

最佳答案

没错,盒子阴影可以完美地在所有浏览器上运行,并且您不需要供应商特定的前缀。唯一的问题是您应该在代码中使用更合理的数字。

例如,当您设置为扩展为.1像素(即1/10像素)时,大多数浏览器会正确地将其解释为“比一个像素少得多的像素为零”,因此什么也不显示。

仅出于测试目的,请尝试

box-shadow:-4px 3px 1px 1px#009989;

并查看结果。

关于css - CSS盒子阴影不一致,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/27878941/

10-12 00:34
查看更多