iPad CSS 3盒子影子bug

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

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

下面是截图它看起来如何在iPad上：

enter image description here

来源

2013-03-18 htw

的可能重复[CSS的box-shadow任意添加白色边框，以事业部（http://stackoverflow.com/questions/7001889/css-box-shadow-adds-arbitrary-white -border-to-div） – 2013-03-18 08:20:24

在Safari中适合我的iPad看起来很好。 – ThinkingStiff 2013-03-18 08:23:24

试试这个

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

来源

2013-03-18 08:53:03 Siddhartha

不，这是没有解决方案，当你做一个图像的盒子阴影和放大和缩小，你可以看到效果.. – htw 2013-03-18 11:22:56

这似乎是一个绘图错误，这错误的影子颜色应该与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; 
}

这将在iOS5的工作，6 iPhone和iPad上（否则未经测试）。 iOS6有一个错误，如果一个img有一个背景色和一个散布为0的盒子阴影，阴影将不会绘制。我发现解决这个问题的唯一方法是确保传播不为零。

来源

2013-05-15 02:46:23 Bachus

您可以用纯色添加一个箱体阴影插图，以删除ipad上的白线。你可能想玩负-1和-2，但这是我使用的。

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

来源

2013-07-04 22:21:49 chanmedia247

当Box Shadow未显示在iPad上时，我有一个问题。

-webkit-appearance: none;

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

尝试

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

来源

2015-06-02 18:57:18

iPad CSS 3盒子影子bug

回答

相关问题