[CSS]陰影效果

最近在刻ListView的畫面,有時候每一筆資料加點陰影效果後覺得有稍微比較好看一點(自以為)...

紀錄一下CSS陰影的條件設定

效果:

CSS:

.div{
  min-height:80px;
  text-align:center;
  background-color:white; 
  font-size:60px;
  margin:5px 10px;
}
.shadow-box{
  -webkit-box-shadow: 0px 5px 10px 0px gray;
  -moz-box-shadow: 0px 5px 10px 0px gray;
  box-shadow: 0px 5px 10px 0px gray;
}

HTML:

<div class="div shadow-box">Batman</div>
<div class="div shadow-box">Green Arrow</div>
<div class="div shadow-box">Wonder Women</div>
<div class="div shadow-box">Super Man</div>
<div class="div shadow-box">Flash</div>