用一个像素设置列表样式

一像素的背景图像可能是相当多用途的。 使用repeat-x可以是水平线， repeat-y可以是垂直线， repeat可以是填充色。 就像一个有趣的概念证明一样，我们可以使用它来创建一个深度图看起来无序的列表：

HTML没什么花哨的，只是像其他任何嵌套的无序列表一样：

<ul id="project-list">
    <li><a href="#">Civil Engineering</a>
        <ul>
            <li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
            <li><a href="#">Culver’s Home Office</a></li>
            <li><a href="#">First Addition to Highland Addition</a></li>
            <li><a href="#">Fox Point Apartments</a>
                <ul>
                    <li><a href="#">East Side</a></li>
                    <li><a href="#">West Side</a></li>
                </ul>
            </li>
            <li><a href="#">Metropolitan Place Phase II</a></li>
            <li><a href="#">Oak Park Place of Baraboo</a></li>
            <li><a href="#">Premier Coop</a></li>
            <li><a href="#">Sleep Inn & Suites</a></li>
            <li><a href="#">Tradewinds Business Center</a></li>
            <li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
        </ul>
    </li>
    <li><a href="#">Environmental Engineering</a></li>
    <li><a href="#">Telecommunications Engineering</a>
        <ul>
            <li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
            <li><a href="#">Oakland County/Radian Communications Michigan</a></li>
            <li><a href="#">T-Mobile Site Deployment</a></li>
            <li><a href="#">U.S. Cellular Network Development</a></li>
            <li><a href="#">Western Wireless South Dakota</a></li>
        </ul>
    </li>
</ul>

在CSS中，我们将单像素PNG图形应用于列表本身（垂直重复）和列表项本身（水平重复）。 在列表项上，我们可以通过给它们内部的锚链接提供白色背景来“阻止”行进整个距离，该背景位于列表项的顶部，从而使该行遮住了线。

#project-list {
    background:transparent url(../images/graypixel.png) repeat-y 15px 0;
    width:340px;
}

#project-list li {
    font-size:16px;
    margin:15px 0 20px;
    padding:0 0 0 10px;
}

#project-list li a {
    background:white;
    color:#1F6DD9;
    display:block;
    padding:3px;
}

#project-list li a:hover {
    color:#84B8FF;
}

#project-list li ul li {
    background:transparent url(../images/graypixel.png) repeat-x 0 8px;
    font-size:13px;
    margin:4px 0 4px 5px;
    padding:0 0 0 20px;
}

#project-list li ul li a {
    padding:0 0 0 3px;
}

#project-list li ul li ul {
    background:transparent url(../images/graypixel.png) repeat-y 15px 0;
    margin-bottom:10px;
}

#project-list li ul li ul li {
    margin-left:16px;
    padding-left:10px;
}

观看演示

翻译自: https://css-tricks.com/style-a-list-with-one-pixel/