使用border属性可为导航菜单添加分隔线。1. 用border-right为每个菜单项加右侧线，再通过li:last-child去除最后一项的边框；2. 用border-left结合相邻兄弟选择器li + li为非首项添加左侧分隔线，并调整间距；3. 通过border-color或简写border设置颜色，推荐浅灰（如#ddd）以保持视觉清爽；4. 垂直菜单可用border-bottom为每项加下边线，同样去除末项线条。根据布局选择边框方向并处理首尾细节，能有效提升导航清晰度。
在CSS初级项目中，为导航菜单添加分隔线是提升界面清晰度的常见做法。使用 border 和 border-color 属性可以轻松实现这一效果，无需额外的HTML元素。
1. 使用 border-right 添加右侧分隔线
给每个菜单项设置右侧边框作为分隔线，最后一个项目通常不加边框，避免多余线条。
示例代码：
nav ul {
list-style: none;
padding: 0;
display: flex;
}
nav li {
padding: 10px 15px;
border-right: 1px solid #ccc;
}
nav li:last-child {
border-right: none; / 去除最后一个项目的分隔线 /
}
2. 使用 border-left 实现左侧分隔线
若希望第一个项目无分隔线，其余项目左侧加线，可使用 border-left 并配合选择器排除第一项。
技巧：
nav li + li {
border-left: 1px solid #ddd;
margin-left: 15px;
padding-left: 15px;
}
这里利用了相邻兄弟选择器（+），只给紧跟在后的列表项添加左侧线和间距，视觉上更平衡。
立即学习“前端免费学习笔记（深入）”；
3. 控制分隔线颜色与样式
border-color 可单独设置边框颜色，也可直接在 border 简写中定义。
常见设置方式：
-
border-color: #999;—— 统一四边颜色 -
border-right-color: red;—— 单独修改右边框颜色 -
border: 1px solid #e0e0e0;—— 简写形式最常用
建议使用浅灰色（如 #ddd 或 #eee）作为分隔线颜色，避免干扰内容阅读。
4. 垂直与水平菜单中的应用
在垂直排列的导航中，可用 border-bottom 为每一项添加下边线，适合侧边栏菜单。
.vertical-nav li {
padding: 8px 0;
border-bottom: 1px solid #eee;
}
.vertical-nav li:last-child {
border-bottom: none;
}
这种方式结构清晰，适合多层级导航布局。
基本上就这些。合理使用 border 相关属性，能快速为导航菜单增添分隔效果，保持页面整洁。关键是根据布局方向选择合适的边框位置，并去除首尾多余的线条。不复杂但容易忽略细节。
