在網站的設計中，標題欄通常是非常重要的一個部分，因為它是網站整體風格的一個重要體現，同時也是用戶首次接觸到網站的地方。通過CSS技術可以輕松實現各種不同的標題欄效果。

/* 簡單標題欄樣式 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
}
/* 導航菜單樣式 */
nav {
display: flex;
justify-content: space-around;
background-color: #eee;
padding: 0.5em 0;
}
nav a {
color: #333;
text-decoration: none;
}
nav a:hover {
color: #fff;
background-color: #333;
}
/* 漸變效果標題欄 */
header {
background-image: linear-gradient(to bottom, #333, #444);
color: #fff;
text-align: center;
padding: 1em;
}
/* 下劃線標題欄 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
position: relative;
}
header::after {
content: "";
display: block;
width: 50px;
height: 3px;
background-color: #fff;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-25%);
}
/* 陰影效果標題欄 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
/* 光暈效果標題欄 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px 10px rgba(255, 255, 255, 0.1) inset, 0 0 10px 10px rgba(255, 255, 255, 0.1);
}

以上是一些常見的CSS標題欄效果，開發者可以根據實際情況選擇合適的樣式進行使用。