當我們想給一個矩形或其他能用 border-radius 生成的形狀（在“自適應的橢圓”一節中可以看到一些示例）加投影時，box-shadow 的表現都堪稱完美。但是，當元素添加了一些偽元素或半透明的裝飾之后，它就有些力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括：

如果我們打算對這類元素直接應用 box-shadow，那只能得到不完全投影的結果。難道我們只能完全放棄投影效果嗎？有沒有辦法可以解決這個難題？

濾鏡效果規范（http://w3.org/TR/filter-effects）為這個問題提供了一個解決方案。它引入了一個叫作 filter 的新屬性，這個屬性也是從 SVG 那里借鑒過來的。盡管 CSS 濾鏡基本上就是 SVG 濾鏡，但我們并不需要掌握任何SVG 知識。相反，只需要一些函數就可以很方便地指定濾鏡效果了，比如blur()、grayscale() 以及我們需要的 drop-shadow() ！如果你喜歡，甚至可以把多個濾鏡串連起來，只要用空格把它們分隔開就可以了，比如：

drop-shadow() 濾鏡可接受的參數基本上跟 box-shadow 屬性是一樣的，但不包括擴張半徑，不包括 inset 關鍵字，也不支持逗號分割的多層投影語法。舉個例子，上面的投影：

可以這樣來寫：

CSS 濾鏡最大的好處在于，它們可以平穩退化：當瀏覽器不支持時，不會出現問題，只不過沒有任何效果而已。如果你確實需要這個效果在盡可能多的瀏覽器中顯示出來，可以同時附上一個 SVG 濾鏡，這樣可以得到稍微好一些的瀏覽器支持度。你可以在濾鏡效果規范（http://www.w3.org/TR/filter-effects/）中為每個濾鏡函數找到對應的 SVG 濾鏡版本。你可以把 SVG濾鏡和簡化的 CSS 濾鏡放在一起使用，讓層疊機制來決定哪一行最終生效：

不幸的是，如果 SVG 濾鏡是存放在一個獨立文件里的，那它就無法像一個簡潔易用的函數那樣在 CSS 代碼中進行隨意配置；如果它是內聯的，則又會攪亂你的代碼。參數需要寫死在文件內部，因此每當我們新加一種哪怕是大同小異的投影效果時，都需要多準備一個文件，這顯然是難以接受的。當然，我們還可以使用 data URI（它也會省掉額外的 HTTP 請求），但這個方法仍然會帶來文件體積的增長。總的來說，這個方法只是一種回退方案，因此只要我們把SVG 濾鏡控制在一定數量以內，哪怕它們的效果大同小異，也是說得過去的。