利用css3如何设置没有上下边的列表间隔线

想要设置一个没有上下边框的列表间隔线，可以采用下面这两种方法：

方法一：使用伪元素 :before 和 :after

利用 CSS3 中的伪元素 :before 和 :after，可以在每个列表项之前和之后插入一个 li 元素的伪元素，并将其设置为条纹样式，从而达到没有上下边框的列表间隔线的效果。

以下是示例代码：

ul {
  list-style: none; /* 去除默认列表样式 */
  padding: 0; /* 去除内边距 */
  margin: 0; /* 去除外边距 */
}

li:before {
  content: "";
  display: block;
  height: 1px;
  margin-top: 10px; /* 控制上边距 */
  margin-bottom: 10px; /* 控制下边距 */
  background-color: #ccc;
}

li:last-child:after {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 10px; /* 控制下边距 */
  background-color: #ccc;
}

以上代码中，我们利用伪元素 :before 在 li 元素之前插入一个占据一行的 1 像素高的元素，并设置 background-color 属性为灰色，以创建灰色的条纹样式。同时，我们设置 margin-top 和 margin-bottom 属性的值来控制线条的间距。

另外，我们利用伪元素 :after 在列表的最后一个元素之后插入一个条纹。这里最后一个元素跟前面的元素略有不同，margin-top 属性被省略了，并且 content 属性的值必须为空字符串。

方法二：使用 background-image 和 background-position

利用 background-image 和 background-position 属性来创建列表间隔线。

以下是示例代码：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 10px 0;
  background-color: #fff;
  background-image: url("images/line.png"); /* 列表间隔线图片地址 */
  background-repeat: no-repeat; /* 不重复 */
}

li:first-child {
  background-position: top center; /* 第一个元素的背景图片显示在顶部 */
}

li:last-child {
  background-position: bottom center; /* 最后一个元素的背景图片显示在底部 */
}

以上代码中，我们首先利用 background-image 属性来设置一张包含了一条水平线的图片，然后将其作为 li 元素的背景。我们还使用了 background-position 属性来将图片放在列表的顶部和底部。

需要注意的是，在设置 background-position 时，我们将第一个元素的值设为 top center，最后一个元素的值设为 bottom center，以确保整个列表的间隔线的方向是正确的。当然，这里的 url() 地址应根据情况修改。