css li 上下边框

CSS中的li元素经常被用来创建列表。在列表项之间添加上下边框是一种很常见的样式展示效果。以下是如何使用CSS为li元素的上下边框提供样式。

li {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

上述代码中，我们使用了CSS的border属性，分别用于创建li元素的顶部和底部边框。这个代码片段中使用的border样式是实线边框，并且使用了灰色的颜色值#ddd。你可以根据自己的需求和喜好修改这些样式。

分别为每个li元素设定边框可能会非常耗时，特别是当你有一个较大的列表需要处理时。你可以使用CSS伪类来让代码变得更加简洁：

li:not(:last-of-type) {
  border-bottom: 1px solid #ddd;
}

上述代码将为除了最后一个li元素以外的所有li元素定义一个底部边框。这里使用了CSS伪类选择器:not和:last-of-type来指定元素。

这种技巧可以帮助你简化代码，并且使样式更加易于管理。同时，这样的设计又可以帮助用户更好地理解列表中各个项目之间的关系。