邊框半徑+漸變+盒子陰影導致衣衫襤褸的邊緣

當我將邊框半徑和背景漸變應用於<li>時，圓角看起來粗糙和粗糙。 Check it out on this jsfiddle 邊框半徑+漸變+盒子陰影導致衣衫襤褸的邊緣

我在Chrome和FF中看到了這個。如果我刪除漸變或邊界半徑問題消失。

任何想法，爲什麼發生這種情況，我會如何解決它？

更新： 我正在構建基於Josh F的想法的jQuery解決方案（請參閱下面的完整答案）。這是一個簡單的jQuery函數，在它後面追加元素的副本。目前，這些腳本將目標元素的位置設置爲relative。（我可以看到這是在某些情況下出現問題。）我的代碼是對的jsfiddle here.

來源

2012-04-18 emersonthis

目前的規範定義box-shadow要繪製外border-box的。但是，背景/邊框將元素繪製到背景中，而不考慮其他元素（它不會繪製和對象，僅在最上面）。由於具有border-radius的元素在box-shadow之前繪製，因此它會用半透明邊緣繪製拐角以使拐角看起來光滑（應該如此）。遺憾的是，由於box-shadow的規格如何措辭，它在之後繪製了這個元素，因此在頁面頂部（在元素之後）繪製了半透明邊緣。通常情況下，這很好，但由於元素和box-shadow在相同像素上都有透明邊緣，因此會產生小的半透明間隙。

這是一個已知的錯誤，或至少被網頁設計社區視爲一個錯誤。有關我的信息，請參閱Bugzilla Bug #474386 (specifically comment #6)。

來源

2012-04-18 14:07:41 0b10011

很酷。很高興知道。你知道任何變通（除了恢復到圖像文件的背景？）？ – emersonthis 2012-04-18 14:19:58

@愛默生，使用圖像文件背景將*不*解決背景。這是背景本身如何繪製的問題，並不是特定於漸變（請參閱[jsFiddle示例]（http://jsfiddle.net/wCtgh/1/））。我典型的解決方法是使用一個'box-shadow'和'background'，它與父代的'background'離得太遠了。儘管透明間隙仍然可見，但並不明顯。不以任何方式理想，但它的工作原理。另一個選擇是不使用「border-radius」（因爲這是主要的罪魁禍首）。 – 0b10011 2012-04-18 14:30:15

呵呵。我認爲我遵循你所說的話，但看起來梯度也是問題的一部分。沒有？當我在Chrome瀏覽器上查看你的jsFiddle（平坦背景）時，問題就不存在了。 – emersonthis 2012-04-18 15:34:35

解決這個問題的一種可能的方法是在盒子後面放置一個僞元素，該盒子比盒子高1px，並且盒子陰影的顏色相同。這可以通過使以前的白色邊緣與箱形陰影顏色相同或接近來隱藏錯誤。

查看this jsFiddle舉例。

來源

2012-04-18 16:14:53

非常聰明。我只是想着嘗試類似的東西，但是我沒有想過使用僞元素。 – emersonthis 2012-04-18 17:11:28

這樣你就不必亂搞元素的父元素或添加任何額外的標記。 – 2012-04-18 17:14:54

我正在玩這個，我發現了一個障礙：我在我的網站上使用'border-radius'，使用幾個不同的類。我意識到我將不得不創建大量的重複類來在所需的任何地方應用僞元素，因爲我無法想出一種以不會寫的方式來寫CSS變得非常混亂。換句話說，我希望我能以某種方式鏡像這個parten的樣式，這樣這個類可以被重用： '.rounded-corners {/ * border radius * /}' '.rounded-corners：{/ * border radius rules * /;寬度：[parent_width];高度：[parent_height]; ...}' – emersonthis 2012-04-18 17:46:00

邊框半徑+漸變+盒子陰影導致衣衫襤褸的邊緣

回答

相關問題