|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
drop-shadow() 語法、參數、示例、詳解
作者:admin 時間:2024-4-18 11:40:0 瀏覽:drop-shadow() 是一個CSS 過濾器函數，其將投影效果應用于輸入圖像，確切的說，它是在圖像后方應用投影。本文將通過示例詳解 drop-shadow() 的語法、參數等知識。
首先，我們通過圖示看看 drop-shadow() 的效果。通過不同的數值，其投影相應發(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);
投影實際上是輸入圖像的 alpha 蒙版的一個模糊的、偏移的版本，用特定的顏色繪制并合成在圖像下面。
筆記
這個函數有點類似于 box-shadow 屬性。box-shadow 屬性在元素的整個框后面創(chuàng)建一個矩形陰影，而 drop-shadow() 過濾器則是創(chuàng)建一個符合圖像本身形狀 (alpha 通道) 的陰影。
語法
drop-shadow(offset-x offset-y blur-radius spread-radius color)
drop-shadow() 函數接受 <shadow> 類型的參數（在 box-shadow 屬性中定義），但不允許使用 inset 關鍵字。
參數
offset-x offset-y (必須)
offset-x指定水平距離，其中負值將陰影放置到元素的左側。offset-y指定垂直距離，其中負值將陰影置于元素之上。如果兩個值都為 0，則陰影直接放置在元素后面。
blur-radius (可選)
陰影的模糊半徑，指定為 <length>。值越大，陰影就越大，也越模糊。如果未指定，則默認為 0，從而產生清晰、不模糊的邊緣。不允許有負值。
spread-radius (可選)
陰影的擴展半徑，指定為 <length>。正的值會導致陰影擴大和變大，而負的值會導致陰影縮小。如果未指定，則默認為 0，陰影的大小將與輸入圖像相同。
警告： 大多數瀏覽器不支持這個參數;如果使用，效果將不會呈現。
color (可選)
陰影的顏色，指定為 <color>。如果未指定，則使用 color 屬性的值。請看如下CSS示例：
/* 帶有 10 像素模糊的黑色陰影 */
drop-shadow(16px 16px 10px black)
/* 帶有 1rem 模糊和 0.3rem 擴散的紅色陰影 */
/* 警告：瀏覽器通常不支持 */
drop-shadow(.5rem .5rem 1rem .3rem #e23)
總結
本文詳細講解了 drop-shadow() 的語法、參數等知識，希望對你有所幫助。
相關文章
標簽: drop-shadow
- 站長推薦
