CSS 是一個非常強大的工具，它可以讓我們輕松地為網站添加各種各樣的效果。其中，圖片底部陰影效果是非常常見的。下面我們就來介紹一下如何使用 CSS 實現這個效果。

// HTML 代碼
<div class="shadow">
<img src="image.jpg">
</div>
// CSS 代碼
.shadow {
display: inline-block;
position: relative;
}
.shadow:before {
content: "";
position: absolute;
z-index: -1;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
opacity: 0.5;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

首先，我們要創建一個 div 元素用來包含我們的圖片。使用 display: inline-block 讓 div 元素可以在文本中間垂直居中。接下來，我們使用 :before 偽元素來為這個 div 元素添加陰影效果。

在 :before 偽元素中，我們設置 content: "" 來讓偽元素顯示為空，接著使用 position: absolute 將其定位到 div 元素的底部，z-index: -1 讓其在 div 元素下面的層級，bottom: -10px 讓其在 div 元素的下方留出 10px 的空隙，left: 0 讓其在 div 元素左側對齊，width: 100% 讓其與 div 元素等寬，height: 10px 設置陰影的高度，opacity: 0.5 設置陰影透明度，background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%) 使用線性漸變來設置陰影顏色。

這樣，我們就實現了圖片底部陰影效果。你可以根據自己的需要調整陰影的顏色、透明度、高度等屬性，為網站添加更美觀的效果。