CSS box-shadow 不一致
CSS box-shadow inconsistent
我有以下 box-shadow：
box-shadow: -.4px .3px .1px .1px #009989;
按 Chrome 中的预期呈现如下：
但在 Firefox 中是这样的：
而在 Safari 中，它根本不适用。
浏览器前缀完全被忽略，因为它们不再适用（！重要也不起作用）。
获得预期结果的常见解决方案是什么 cross-browser？
没错，box-shadow 完美适用于所有浏览器，您不需要供应商特定的前缀。唯一的问题是您应该在代码中使用更合理的数字。
例如，当您将传播设置为 .1 像素（即 1 / 10 像素）时，大多数浏览器会正确地将其解释为 "much less than a pixel is zero pixels"，因此不会显示任何内容。
只是为了测试目的尝试
框阴影：-4px 3px 1px 1px #009989;
并查看结果。
发生这种情况的原因可能是小数像素值。为了跨浏览器兼容性，使用非十进制像素值或使用 em 而不是 px.
要使用 em，您需要设置基本字体大小。假设您将其设置为 10px。那么 0.4px 的值将等于 0.04em 等等。然后你可以这样做：
box-shadow: -.04em .03em .01em .01em #009989;
我有以下 box-shadow：
box-shadow: -.4px .3px .1px .1px #009989;
按 Chrome 中的预期呈现如下：
但在 Firefox 中是这样的：
而在 Safari 中，它根本不适用。
浏览器前缀完全被忽略，因为它们不再适用（！重要也不起作用）。
获得预期结果的常见解决方案是什么 cross-browser？
没错，box-shadow 完美适用于所有浏览器，您不需要供应商特定的前缀。唯一的问题是您应该在代码中使用更合理的数字。
例如，当您将传播设置为 .1 像素（即 1 / 10 像素）时，大多数浏览器会正确地将其解释为 "much less than a pixel is zero pixels"，因此不会显示任何内容。
只是为了测试目的尝试
框阴影：-4px 3px 1px 1px #009989;
并查看结果。
发生这种情况的原因可能是小数像素值。为了跨浏览器兼容性，使用非十进制像素值或使用 em 而不是 px.
要使用 em，您需要设置基本字体大小。假设您将其设置为 10px。那么 0.4px 的值将等于 0.04em 等等。然后你可以这样做：
box-shadow: -.04em .03em .01em .01em #009989;