ipadcss3盒阴影bug

ipadcss3盒阴影bug,ipad,css,Ipad,Css,当我在iPad Safari上打开下面的bug时,阴影前是否有白色边框。。 有人知道这个错误和解决方案吗? HTML: 以下是它在iPad上的屏幕截图: 试试这个 .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; } 这似乎是一个绘图错误,阴影颜色应该与img边缘混合,但不

当我在iPad Safari上打开下面的bug时,阴影前是否有白色边框。。 有人知道这个错误和解决方案吗? HTML:

以下是它在iPad上的屏幕截图:

试试这个

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

这似乎是一个绘图错误,阴影颜色应该与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和iOS6,除非经过测试。iOS6有一个bug,如果img有一个背景色和一个扩展为0的框阴影,阴影将不会绘制。我发现解决这个问题的唯一方法是确保排列不为零。

你可以添加一个带有纯色的方框阴影插图,以去除ipad上的白线。你可能想玩负片-1和-2,但这是我用的

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

我曾经遇到过一个问题,那就是盒子的阴影没有出现在iPad上

-webkit-appearance: none;
这对我有用。希望有帮助

试一试


对我来说,在Safari中,iPad上可能会出现类似的效果。不,这不是解决方案,当你在图像上做框影并放大和缩小时,你可以看到效果。。
-webkit-appearance: none;
-webkit-appearance: none;
-webkit-box-shadow: 5px 5px 4px 2px rgba(0, 0, 0, 0.4);