一条边框与background的思考-前端开发博客

@doyoe 大神写的一篇新文章：background系列之无处不在的妙趣，给了一些新的思路和惊喜。我比较赞成第二种，使用伪元素来做，兼容性较好。第三种使用background渐变给我一亮，第四种改善background-origin很少见，新思路，值得学习。

作者的需求如下：

divider

HTML代码：

<ul class="demo">
    <li>Lady gaga</li>
    <li>Mariah Carey</li>
    <li>Adele</li>
    <li>Avril Lavigne</li>
    <li>Sarah Brightman</li>
    <li>Celine Dion</li>
</ul>

方案二：

使用伪元素制作一个变宽，并定位在底部。

CSS代码：

.demo li {
    padding-left: 15px;
    line-height: 40px;
}
.demo li::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #ccc;
    content: "\0020";
}
.demo li:not(:last-child)::after {
    left: 15px;
}
.demo li:hover {
    background-color: #f3f3f3;
}

方案三：

so cool，使用背景图像（注意是图像）渐变，代码瞬间少了许多。(原文用background，我这里改回background-image方便理解)

.demo li {
    padding-left: 15px;
    line-height: 40px;
    background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;
}
.demo li:not(:last-child) {
    background-position: 15px;
}
.demo li:hover {
    background-color: #f3f3f3;
}

方案四：

在第三种的基础上使用了background-origin

background-origin: border-box | padding-box | content-box

padding-box：从padding区域（含padding）开始显示背景图像。

border-box：从border区域（含border）开始显示背景图像。

content-box：从content区域开始显示背景图像。

所以我们可以利用padding-box和content-box解析不同的背景图像（注意是图像）开始区域。来实现，代码如下：

.demo li {
    padding-left: 15px;
    line-height: 40px;
    background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;
    background-origin:padding-box;/*background-origin默认值，可不写，我只是为了跟下面对比而已*/
}
.demo li:not(:last-child) {
    background-origin:content-box;
}
.demo li:hover {
    background-color: #f3f3f3;
}

欢迎大家到：杜瑶的原文看详细解说，本文参考作者代码的一些理解，不当之处，还请到作者原文查阅。

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流

方案二：

方案三：

方案四：

阅读更多

关注我