CSS 陰影製作效果(無需圖片即可實現)

先看效果

只需要一個指定div就能實現這個效果，實際上在未來調用之類的上都是很方便的。其實感覺自己實現的還不是特別的好，比起原來的似乎總覺得缺了點什麼，但基本也算完成了。

html不多說，就是一個加了.shadow的div，CSS部分才是重點！

核心部分如下：

body .shadow {
  position: relative;
  background-color: #fff;
  margin: 20px auto;
  vertical-align: center;
  border: #fff 1px solid;
  box-shadow: 1px 1px 3px #000, 1px 1px 5px 5px #eee inset;
}
body .shadow:before {
  content: '';
  z-index: -1;
  top: 50%;
  bottom: -3px;
  left: 0;
  right: -1px;
  position: absolute;
  box-shadow: 0px 0px 2px #000;
  border-radius: 500px/10px;
}

因為是用stylus寫的，所以產生的CSS就是醬紫的了，不用介意。

box-shadow可以用逗號分隔，然後設定好內外光暈，關於box-shadow，

第一個第二個是位移，第三個是陰影大小，第四個是擴散程度，寫著寫著就記住了呢www

然後我們用before和after的偽類，現在看看這兩個元素還是很好用呢，相當於不用額外的div就能實現效果，否則的話就要加div實現了。

裡面有個content屬性，可以再before裡設定顯示內容，這裡我們不需要內容，如果你有需要，比如hello，那麼content:'hello'就行了。

接著是大小定位，這裡也漲姿勢了，設定大小的兩種方式：

width/height設定

top/bottom/left/right完全設定

這兩種方式都能實現，這裡就用第二種設定了，順便定位嘛。

接著box-shadow，處理完陰影，可以先設定background-color設定顏色，這樣方便查看。

border-radius: 500px/10px;，可以看手冊