CSS能夠?qū)崿F(xiàn)導(dǎo)航欄跳轉(zhuǎn)時(shí)的漸變效果，這種效果通常被稱為導(dǎo)航欄漸變。

要?jiǎng)?chuàng)建這種效果，首先需要確保你的導(dǎo)航欄是一個(gè)鏈接的列表。例如：

<ul>
<li><a href="home.html">首頁(yè)</a></li>
<li><a href="services.html">服務(wù)</a></li>
<li><a href="portfolio.html">作品集</a></li>
<li><a href="blog.html">博客</a></li>
<li><a href="contact.html">聯(lián)系我們</a></li>
</ul>

接下來(lái)，我們需要在 CSS 文件中添加以下代碼來(lái)為導(dǎo)航欄創(chuàng)建漸變效果：

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-image: linear-gradient(to bottom, #003366, #6699cc);
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}

這份代碼為導(dǎo)航欄創(chuàng)建了一個(gè)線性漸變背景圖像，從上到下從 #003366 漸變到 #6699cc。

此外，我們還為鏈接的列表項(xiàng)添加了 float 屬性，使它們?cè)谕恍袃?nèi)排列。鏈接也被設(shè)為塊級(jí)元素，使它們能夠占據(jù)整個(gè)列表項(xiàng)。

當(dāng)鏈接被懸停時(shí)，它們的背景顏色被改變?yōu)?#111，這進(jìn)一步強(qiáng)調(diào)了導(dǎo)航欄的可點(diǎn)擊性。

現(xiàn)在，你已經(jīng)知道了如何使用 CSS 來(lái)實(shí)現(xiàn)導(dǎo)航欄漸變效果。你可以在你的網(wǎng)站上使用這種效果，讓你的導(dǎo)航欄更加吸引人和易于使用。