使用box-shadow和drop-shadow怎么實(shí)現(xiàn)不規(guī)則的投影

使用box-shadow和drop-shadow怎么實(shí)現(xiàn)不規(guī)則的投影？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

• 半透明圖像、背景圖像、或者 border-image（比如老式的金質(zhì)像框）；

• 元素設(shè)置了點(diǎn)狀、虛線或半透明的邊框，但沒有背景（或者當(dāng)background-clip 不是 border-box 時）；

• 對話氣泡，它的小尾巴通常是用偽元素生成的；

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

濾鏡效果規(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 屬性是一樣的，但不包括擴(kuò)張半徑，不包括 inset 關(guān)鍵字，也不支持逗號分割的多層投影語法。舉個例子，上面的投影：

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

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

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

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

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

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

看完上述內(nèi)容，你們掌握使用box-shadow和drop-shadow怎么實(shí)現(xiàn)不規(guī)則的投影的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！