CSS實現標題欄立體效果是一件非常有趣的事情。通過CSS的偽元素和陰影屬性，我們可以輕松地為標題欄增加立體感。下面就來看一下如何實現。

/* 基本樣式 */
.header {
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
position: relative;
}
.header::before {
content: "";
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 10px;
background-color: #222;
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.8);
 }

代碼解析：

標題欄

首先定義了基本樣式：背景顏色為#333，字體顏色為#fff，高度為50px，并設置了位置為相對定位。

接著，使用偽元素::before來添加立體感。為了讓偽元素占據整個標題欄的底部，需要將bottom設為負數，同時讓left和right為0。高度為10px，并設置背景顏色為#222，讓它與標題欄的顏色相近。

最后，使用box-shadow屬性為偽元素添加陰影。陰影的高度為10px，通過調整第四個參數可以控制陰影的大小和方向。這里設置為-10px，表示讓陰影向上縮小。

通過這樣的設置，我們就可以為標題欄添加立體感，并讓它看起來更加美觀。代碼可以通過簡單的調整來適應不同的場景，具有很高的靈活性。