CSS 橢圓陰影效果: 使用 after 和 z-index

eclipse shadow

今天學到一招覺得很好用,就記錄一下。可以看上圖是最後效果,在css3的box-shadow很方便,可是要做成像上面那樣陰影是有弧度的就沒辦法直接做,不過可以用一些小技巧就可以達成。

首先準備一個div,class取成box。

box可以改成你要的樣式,然後用:after在box後面生成一個新的物件,再加一些效果就好了。

  1. .box::after{   
  2.     content" ";   
  3.     display:block;   
  4.     width:100%;   
  5.     position:absolute;   
  6.     border-radius:50%;   
  7.     box-shadow:0 10px 5px #ccc;   
  8.     z-index:-1;   
  9. }  

這個效果很方便,有興趣可以試試看。

Demo

留言

熱門文章