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

回答

相關問題