[分享]css中导航栏两边都带竖线

CSS导航栏是网站设计中很重要的一部分，可以提高用户体验。今天我们将介绍如何使用CSS在导航栏两边添加竖线。

.nav-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
  background-color: #f1f1f1;
  /*添加竖线*/
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
} 

代码中我们首先定义一个导航栏的类，使用Flex布局并设置背景色和高度。接下来，我们通过border-left和border-right添加左右两边的竖线，并设置颜色。这样就能在导航栏两侧添加竖线。

不过，这只是添加了单一颜色的竖线。如果想要更加丰富的效果，可以添加渐变效果或者图片。例如：

.nav-bar{
  /*略*/
  border-left: 1px solid #fff;
  background: linear-gradient(to right, #fff, #ccc, #fff);
} 

这里我们使用渐变效果，让竖线颜色从白色到灰色再到白色，达到更加流畅的过渡效果。

总的来说，在CSS中添加导航栏两边的竖线是非常简单的，只需要使用border属性即可。同时，我们可以根据需求来设置颜色、渐变或者图片等效果，使得导航栏更加多样化，提高用户体验。