CSS是前端開發人員不可或缺的工具之一，它可以為網頁元素添加各種各樣的樣式，讓網頁更加美觀。今天，我們來介紹一種非常酷炫的CSS效果——讓DIV具備立體效果。

/* 定義DIV樣式 */
.depth {
position: relative;
width: 200px;
height: 100px;
margin: 50px auto;
background-color: #DDDDDD;
box-shadow: 10px 10px 10px #999999;
}
/* 定義DIV內部元素的樣式 */
.depth h2 {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 5px;
background-color: #333333;
color: #FFFFFF;    
}
.depth p {
padding: 20px;
}

首先，我們給DIV添加了一個box-shadow屬性，這個屬性可以為元素創建一個陰影效果。而要讓DIV看起來更立體，我們需要調整這個陰影的方向和距離。

接著，我們為DIV內部的h2和p元素添加樣式。因為我們需要讓它們相對于DIV進行定位，并且需要為h2添加一個不透明的背景色和白色的文字。

<div class="depth">
<h2>標題</h2>
<p>這是一個立體的DIV效果</p>
</div>

最后，我們在HTML中添加這個DIV元素。現在，你可以在瀏覽器中查看你的網頁，看看你的DIV是不是具備了一個酷炫的立體效果。