CSS box-shadow不一致

Question

我有以下方框阴影：

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

这样在Chrome中按预期呈现：

但是在这样的Firefox中：

在Safari中，根本不适用。
浏览器前缀完全被忽略，因为它们不再适用（！重要也不起作用）。
跨浏览器获得所需结果的常见解决方案是什么？

Answer 1

由于小数像素值，可能会发生这种情况。对于跨浏览器兼容性，请使用非小数像素值或使用em代替px。

要使用em，您需要设置基本字体大小。假设您将其设置为10px。然后0.4px的值将等于0.04em，依此类推。然后你可以做这样的事情：

box-shadow: -.04em .03em .01em .01em #009989; 

Answer 2

没错，box-shadow完美适用于所有浏览器，而且您不需要特定于供应商的前缀。唯一的问题是您应该在代码中使用更合理的数字。

例如，当您设置为扩展到.1像素（即1/10像素）时，大多数浏览器正确地将其解释为＆＃34;远小于像素为零像素＆＃34;所以什么都不显示。

仅出于测试目的尝试

box-shadow：-4px 3px 1px 1px＃009989;

并查看结果。