1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. CSS3 透過 Filter 濾鏡屬性,讓不規則的區塊,也能產生陰影的效果

CSS3 透過 Filter 濾鏡屬性,讓不規則的區塊,也能產生陰影的效果

2021/12/23

梅問題-CSS3透過Filter屬性,實現不規則的區塊中,建立陰影的效果
  自從CSS3新增了許多屬性後,讓現在在製作網頁,大幅的減少圖像的製作,同時還加速了網頁的載入速度,而今天梅干要來分享一個,相當實用的特效,以往若要在區塊中加陰影,就得將圖片儲存成PNG並帶半透明,才會有陰影的效果,不但圖檔變得相當大,載入時間也變長,同時當要調整陰影的強弱時,就得重新開啟檔案,調整後再另存成網頁格式,過程有些繁鎖,但自從有了CSS3提供的陰影這屬性後,終於不用再透過影像工具來處理了。

直接透過CSS3的陰影屬性,不但可設定陰影的顏色、模糊的比例、影子的強弱,但這只限於四方形的區塊,若圖像為不規則時,就會出現陰影會以矩形區塊來顯示,就會顯得有些奇怪,好在CSS3還有另一個濾鏡的屬性,同時這濾鏡的屬性內建支援陰影效果,因此只要透過這個濾鏡的屬性,就能輕鬆實現在不規則的區塊中,顯示陰影的效果啦!


Step1
一般只要在物件上,加入box-shadow陰影特效時,這時在物件的四周就會出現淡淡的陰影效果。
梅問題-CSS3透過Filter屬性,實現不規則的區塊中,建立陰影的效果
Step2
因此這時只要稍作調整,將box-shadow->filter: drop-shadow(),這樣就可實在,在不規則的物件中,顯示陰影的效果啦!因此有需要的朋友,也趕快學起來囉!!
梅問題-CSS3透過Filter屬性,實現不規則的區塊中,建立陰影的效果