iPad CSS 3盒子阴影bug

时间:2013-03-18 08:10:37

标签: ipad css3

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

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

以下是它在iPad上的外观截图:

enter image description here

4 个答案:

答案 0 :(得分:0)

试试这个

.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;
}

答案 1 :(得分:0)

这似乎是一个绘图错误,阴影颜色应该与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的盒子阴影,阴影将不会被绘制。我发现解决这个问题的唯一方法是确保点差不为零。

答案 2 :(得分:0)

您可以使用纯色添加框阴影插图,以移除ipad上的白线。您可能想要使用负-1和-2,但这是我使用的。

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

答案 3 :(得分:0)

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

-webkit-appearance: none;

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

尝试

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