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

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

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

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

view plaincopy to clipboardprint

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