這麼神奇的屬性,確定不來學習下麼

Jason_SubMara發表於2019-03-12

Drop-shadow

By JasonSubMara--jie.yr127@gmail.com at 20190312


box-shadow

.box {box-shadow:5px 5px 10px black;}  // 語法規則:box-shaodw:x偏移 y偏移 模糊大小 色值
複製程式碼

drop-shadow

.box {filter:drop-shadow(5px 5px 10px black)}  // 語法規則:filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值)
複製程式碼

從語法上來看,二者的寫法相似,下面來看對應的表現形式,為了更好的理解,貼圖來看

對比圖

從上圖上來看,在頁面中box-shadow所顯示的效果是單側擴散,而drop-shadow顯示的效果則是都有擴散。 雖然在日常開發中對於常規的盒模型的陰影處理網上已有很多教程或講解,於是乎,接下來來說說這條屬性為什麼用到。

這麼神奇的屬性,確定不來學習下麼

專案中這個模組的處理因為一點點拼形狀有點難受,所以直接以背景圖的形式做的,但是,天有不測風雲,他需要加上外發光,PSD圖上做好的外發光切過來做背景圖由於頁面主體背景是個視訊,可能是不可控的不知道什麼原因導致直接使用不太理想,於是在經過請教大佬之後,用上了drop-shadow這個屬性。

此時如果使用的是box-shadow屬性的話,則會使整個div都有外發光的效果,而不能做到特殊形狀背景的外發光效果。

PS:第一次寫文章,有誤之處還望指出,多謝支援!


My GitHub: github.com/yiranjason ??這麼明顯了,還望多鼓勵鼓勵!

參考連結

CSS3:filter:drop-shadow濾鏡與box-shadow區別應用

相關文章