卡卡網(wǎng)

drop-shadow() 是一個(gè)CSS 過濾器函數(shù)，其將投影效果應(yīng)用于輸入圖像，確切的說，它是在圖像后方應(yīng)用投影。本文將通過示例詳解 drop-shadow() 的語法、參數(shù)等知識。

首先，我們通過圖示看看 drop-shadow() 的效果。通過不同的數(shù)值，其投影相應(yīng)發(fā)生變化。

效果1

filter: drop-shadow(30px 10px 4px #4444dd);

效果2

filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));

效果3

filter: drop-shadow(0 0 0.75rem crimson);

投影實(shí)際上是輸入圖像的 alpha 蒙版的一個(gè)模糊的、偏移的版本，用特定的顏色繪制并合成在圖像下面。

• box-shadow最詳細(xì)介紹：語法、參數(shù)、示例
• 示例分解 CSS box-shadow 與 drop-shadow 的不同

語法

drop-shadow(offset-x offset-y blur-radius spread-radius color)

drop-shadow() 函數(shù)接受 <shadow> 類型的參數(shù)（在 box-shadow 屬性中定義），但不允許使用 inset 關(guān)鍵字。 

參數(shù)

offset-x offset-y (必須)

offset-x指定水平距離，其中負(fù)值將陰影放置到元素的左側(cè)。offset-y指定垂直距離，其中負(fù)值將陰影置于元素之上。如果兩個(gè)值都為 0，則陰影直接放置在元素后面。

blur-radius (可選)

陰影的模糊半徑，指定為 <length>。值越大，陰影就越大，也越模糊。如果未指定，則默認(rèn)為 0，從而產(chǎn)生清晰、不模糊的邊緣。不允許有負(fù)值。

spread-radius (可選)

陰影的擴(kuò)展半徑，指定為 <length>。正的值會導(dǎo)致陰影擴(kuò)大和變大，而負(fù)的值會導(dǎo)致陰影縮小。如果未指定，則默認(rèn)為 0，陰影的大小將與輸入圖像相同。 

警告： 大多數(shù)瀏覽器不支持這個(gè)參數(shù);如果使用，效果將不會呈現(xiàn)。

color (可選)

陰影的顏色，指定為 <color>。如果未指定，則使用 color 屬性的值。請看如下CSS示例：

/* 帶有 10 像素模糊的黑色陰影 */
drop-shadow(16px 16px 10px black)

/* 帶有 1rem 模糊和 0.3rem 擴(kuò)散的紅色陰影 */
/* 警告：瀏覽器通常不支持 */
drop-shadow(.5rem .5rem 1rem .3rem #e23)

總結(jié)

本文詳細(xì)講解了 drop-shadow() 的語法、參數(shù)等知識，希望對你有所幫助。

相關(guān)文章

• 示例分解 CSS box-shadow 與 drop-shadow 的不同

標(biāo)簽: drop-shadow