應用投影的最佳方法是什么？

Question

應用陰影的最佳方法是什么？ 我現在在一個網站上工作，我們有很多這樣的網站，但是，我一直在努力尋找最好的方法來做到這一點。 該網站的動畫很重，因此陰影需要與此配合良好。

我嘗試了一個jQuery影子pulgin。 陰影看起來很好並且易於使用，但速度很慢，並且不適用於任何動畫（需要大量重繪，非常慢跑）。

我也嘗試創建自己的jQuery擴展，將我的元素包裝在幾個灰色div中，然后稍微偏移它們以產生陰影效果。 這很好用。 它快速響應動畫。 然而，它使得DOM操作/遍歷變得麻煩，因為所有內容都包含在這些陰影div中。

我知道必須有一個更好的方法，但這不完全是我的強項。 思考？

Answer 1

ShadedBorder是一個外觀漂亮且易於使用的Shadow-Library。 看看這個

Answer 2

你不需要將那些shadow-div包裹在其他內容周圍，只需稍微設置它們並將它們放在較低的z-index上！ - ）

Answer 3

如果你的主要問題是導航DOM，只需在你的元素中添加一個類和/或id，並用JQuery選擇器引用它。 如果將ref存儲在變量中，則更好，因此您不需要過於頻繁地選擇它

Answer 4

雖然它還沒有完整的跨瀏覽器支持，但您可能希望嘗試使用CSS 3 text-shadow屬性 。

Answer 5

這在很大程度上取決於您的圖像需要更改的頻率，以及它們將覆蓋的彩色區域。 因為我猜你需要注意IE6的合規性，所以大多數alpha-PNG解決方案都會引起如此可怕的緊張情緒，以至於你會花費更多時間進行性能優化，而不是你想要的猜測。

為了解決這個問題，由於我們的圖像每月修改不到一次，我們通過緩存PHP腳本調用圖像，該腳本使用預定義的背景顏色自動應用陰影，因此我們不必依賴任何圖像。透明度。 這導致更快的下載（更少的HTTP請求）和更快的界面，因為工作中的Javascript / CSS魔法更少。

我知道這是一個非常老派的解決方案，如果您的圖像是靜態的，上述解決方案將是完全可以接受的，但是跨瀏覽器兼容並且動畫可能會迫使您做出這種風格的解決方案。