CSS陰影的圖像

Question

我有這3盒

哪些是通過以下方式構建：

<ul class="home_boxs"> 
     <li class="home_box light_blue"> 
     <div class="news clearfix"></div> 
     </li> 
     <li class="home_box blue"> 
     <div class="news clearfix"></div> 
     </li> 
     <li class="home_box dark_blue"> 
     <div class="news clearfix"></div> 
     </li> 
    </ul> 

我尋找現在要做的是增加一個小的陰影圖像（自定義png）在每個框下面。什麼是實現這一目標的最佳方式？一些建議將非常感激。

見樣本：

Answer 1

你可以做這樣的事情：

ul { 
    list-style: none; 
} 
li { 
    float: left; 
} 
.home_box { 
    position: relative; 
    width: 150px; /* to change with your size */ 
    height: 100px; 
    /* To add more styling according to your needs */ 
} 
.home_box:before { 
    content:' '; 
    position: absolute; 
    width: 100%; 
    height: 10px; 
    background: url(//placehold.it/150x10); /* placeholder */ 
    border-radius: 50%; 
    bottom: -20px; 
} 

，或者，如果你不想使用圖片：

.home_box:before { 
    content:' '; 
    position: absolute; 
    width: 100%; 
    height: 10px; 
    background-color: #999999; 
    border-radius: 50%; 
    bottom: -20px; 
    box-shadow: 0 0 10px #999999; 
} 

Example與圖像 - Example沒有圖像