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

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

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

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

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

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

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

可以這樣來寫：

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

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

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

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論