ipad - iPad CSS 3 box-shadow 错误

Question

当我在 iPad Safari 上打开以下错误时，阴影前是否有白色边框.. 有人知道这个错误和解决方案吗？HTML：http: //jsfiddle.net/RJxBu/

box-shadow: 5px 5px 4px 2px rgba(0, 0, 0, 0.4);

这是它在 iPad 上的屏幕截图：

Answer 1

您可以添加一个带有纯色的盒子阴影插图来移除 ipad 上的白线。您可能想使用负数 -1 和 -2 ，但这是我使用的。

    -webkit-box-shadow: inset -1px -2px 2px #000000, 5px 5px 4px 12px rgba(0,0,0, 0.4);

Answer 2

尝试这个

.test {
    -webkit-box-shadow: 5px 5px 4px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 5px 5px 4px 2px rgba(0, 0, 0, 0.4);
    border: 0px;
}

Answer 3

这似乎是一个绘图错误，阴影颜色应该与 img 边缘混合，但不是。向 img 添加与阴影颜色匹配的背景颜色可以解决问题：

.test {
    background-color: rgba(0,0,0,1); /* Has to be 1 alpha or it won't draw */
    box-shadow: 5px 5px 4px 2px rgba(0, 0, 0, 0.4);
    border: 0px;
}

这将适用于 iPhone 和 iPad 上的 iOS5 和 6（否则未经测试）。iOS6 有一个错误，如果一个 img 有一个背景颜色和一个散布为 0 的框阴影，阴影将不会绘制。我发现解决此问题的唯一方法是确保价差不为零。

Answer 4

当 Box Shadow 没有出现在 iPad 上时，我遇到了一个问题。

-webkit-appearance: none;

这对我有用。希望有帮助。

尝试

-webkit-appearance: none;
-webkit-box-shadow: 5px 5px 4px 2px rgba(0, 0, 0, 0.4);