css3背景渐变以及阴影与导航栏的几种实现方式

CSS3中实现背景渐变和阴影可以使用linear-gradient函数来创建渐变效果，以及box-shadow属性来添加阴影。以下是实现导航栏的几种方式：

1. 基本导航栏：

/* 渐变背景 */
.navbar {
  background-image: linear-gradient(to right, #FFC107, #FF5722);
}
 
/* 阴影效果 */
.navbar {
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}

2. 使用伪元素添加分割线：

.navbar li::after {
  content: '';
  display: inline-block;
  height: 1px;
  width: 100px;
  background-image: linear-gradient(to right, #FFC107, #FF5722);
  margin: 0 10px;
}

3. 使用伪元素添加图标：

.navbar li::before {
  content: '\276F';
  color: white;
  margin-right: 10px;
}

4. 导航栏响应式设计：

@media (max-width: 600px) {
  .navbar li {
    display: block;
    text-align: center;
  }
}

这些示例展示了如何使用CSS3的基本功能来增强导航栏的视觉效果。实际应用时，可以根据具体设计要求和布局调整相关属性。