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

• 半透明圖像、背景圖像、或者 border-image（比如老式的金質像框）；
• 元素設置了點狀、虛線或半透明的邊框，但沒有背景（或者當background-clip 不是 border-box 時）；
• 對話氣泡，它的小尾巴通常是用偽元素生成的；

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

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

filter: blur() grayscale() drop-shadow();

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

box-shadow: 2px 2px 10px rgba(0,0,0,.5);

可以這樣來寫：

filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

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

filter: url(drop-shadow.svg#drop-shadow);
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));

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

另外一件需要牢記的事情就是，任何非透明的部分都會被一視同仁地打上投影，包括文本（如果背景是透明的），正如我們剛剛看到的那樣。你可能會想，是不是可以通過 text-shadow: none; 來取消掉文本上的投影呢？其實 text-shadow 跟它是完全不相干的兩碼事，因此這樣做并不能取消文本上的 drop-shadow() 效果。此外，如果你已經(jīng)用 textshadow在文本上加了投影效果，文本投影還會被 drop-shadow() 濾鏡再加上投影，這本質上是給投影打了投影！看看下面這段示例代碼（請原諒它慘不忍睹的效果，這樣只是為了凸顯這個怪異的問題）：

color: deeppink;
border: 2px solid;
text-shadow: .1em .2em yellow;
filter: drop-shadow(.05em .05em .1em gray);

你可以看到它的渲染效果，圖中的文字被同時打上了 textshadow和 drop-shadow()。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論