NIVO滑塊圓角問題

如果你看看我的滑塊，你會發現第一張幻燈片是完美的，但所有其他幻燈片只有在圖像底部有白色的角落。

我無法弄清楚這一點！我最初通過給圓角切片解決了問題，但是過渡效果會使圖像看起來被圓角切片切割。

任何人都可以在這裏提出建議嗎？這讓我瘋狂！

2010-10-02 Erik

NIVO滑塊的創建者對這個問題沒有用處。並且不要告訴我關於PNG的。它與PNG無關。謝謝。 – Erik 2010-10-02 22:03:58

對不起，我在網站上看不到您的問題。你能解釋一下你在哪裏看到它（可能是截圖），以及在哪個瀏覽器中？ – sleske 2010-10-02 22:47:49

@sleske：仔細查看頁面上部三分之一大水平幻燈片的左下角和右下角。特別是當幻燈片過渡時，我看到（在Chrome 6中）角落中有少量白色。 – 2010-10-02 22:57:14

看起來問題在於類屬性設置爲「nivo-slice」的元素。也許，這個片段將解決這個問題：

.nivo-slice { 
    -moz-border-radius: 9px; 
    -webkit-border-radius: 9px; 
    border-radius: 9px; 
    ... 
}

2010-11-29 07:27:48 Daria

這真的弄亂了幻燈片的圖像，我得到了幾個角落出現在每個圖像的頂部。 – stef 2012-04-10 18:43:29

這種解決方案是錯誤的。你不明白Nivo Slider是幹什麼的。 – 2013-03-02 00:14:10

我找到了一個解決方案，但它確實需要一點與NivoSlider妥協雖然。唯一能讓它工作的方法就是讓滑塊只有一個切片，所以根據你的觀點，這可能是可行的或不可行的。

然後，您只需將border-radius應用於nivo-slice和滑塊包裝元素，並且您應該處於業務中。這也適用於CSS3PIE，所以我能夠跨瀏覽器兼容它。

2011-02-10 15:04:22 jbwharris

2011-10-01 02:44:44

這個解決方案比Daria's更適合我，upvote。 – stef 2012-04-10 18:45:24

這個解決方案是真正的答案。謝了哥們。 – 2012-04-13 18:02:07

.nivoSlider { 
    position:relative; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px;  
}

這可能會有幫助。適合我！

2012-04-11 19:10:51 Henry

這一個實際上幫助。你只需要添加這個CSS，而不是別的。 – Nikhil 2012-08-20 12:34:31

回答