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

实现没有上下边的列表间隔线一般可以使用CSS属性`border`来实现，但是为了达到更好的视觉效果，可以使用CSS3的新特性`::before`和`::after`伪元素以及`linear-gradient()`渐变属性来实现。

## 1. 使用border属性实现列表间隔线

在列表中分隔每一项，可以通过设置`border-top`和`border-bottom`来实现。以下是实现代码：

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li {
        padding: 1rem;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    li:first-child {
        border-top: none;
    }
    li:last-child {
        border-bottom: none;
    }

该代码使用CSS的基本属性，利用`border-top`和`border-bottom`来为每个列表项设置上下边框。并通过`li:first-child`和`li:last-child`选择器去除第一个和最后一个列表项的上下边框。

## 2. 使用CSS3伪元素实现列表间隔线

在实现列表间隔线时，我们可以使用CSS3中的伪元素`::before`和`::after`，代替使用border属性，来创建一个虚拟的元素来达到分割的效果。以下是实现代码：

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li {
        padding: 1rem;
        position: relative;
    }
    li::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #ccc;
    }
    li:last-child::after {
        display: none;
    }

该代码使用了CSS3中的`::after`伪元素来给每个列表项添加了一个虚拟元素，通过设置其`position: absolute`属性将其放置在每个列表项的底部。

## 3. 使用CSS3渐变属性实现列表间隔线

在CSS3中，我们可以使用`linear-gradient()`方法来创建渐变效果，将其应用于每个列表项的`background-image`属性上来实现分隔线的效果。以下是实现代码：

    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li {
        padding: 1rem;
        position: relative;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: 100% 1px;
    }
    li:last-child {
        background-image: none;
    }

该代码利用了CSS3中`linear-gradient()`方法的渐变效果，来实现列表项的分隔线效果。

## 结论

以上是三种避免使用`border`属性实现列表分隔线的方法。我们可以根据实际的需求情况，选择合适的方法来实现列表的间隔线效果。