CSS導(dǎo)航欄陰影設(shè)置

在CSS中，我們可以使用box-shadow屬性為導(dǎo)航欄添加陰影效果。box-shadow屬性接受四個(gè)值，分別是水平偏移、垂直偏移、模糊半徑和顏色。

我們需要給導(dǎo)航欄一個(gè)背景色，這樣陰影才會(huì)更明顯，可以通過(guò)background-color屬性來(lái)設(shè)置。

我們通過(guò)box-shadow屬性來(lái)添加陰影效果，可以設(shè)置一個(gè)較小的水平偏移和垂直偏移，以及一個(gè)適中的模糊半徑和顏色。

為了更好地展示陰影效果，我們還可以給導(dǎo)航欄添加一些交互效果，比如鼠標(biāo)懸停時(shí)陰影變大，這可以通過(guò)transition屬性來(lái)實(shí)現(xiàn)，設(shè)置陰影的過(guò)渡效果。

為了確保導(dǎo)航欄在各種情況下都能正常顯示，我們還需要添加一些重置樣式。

示例代碼如下：

.navbar {
  background-color: #333;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.3s ease;
}
.navbar:hover {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.7);
}
.navbar li {
  list-style-type: none;
  display: inline-block;
  padding: 10px;
}
.navbar a {
  color: #fff;
  text-decoration: none;
}