一条边框与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;
}

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

阅读更多

  1. css3多重背景详解
  2. css3背景颜色渐变属性
  3. CSS背景颜色透明
  4. css3背景属性:http://caibaojian.com/css3/properties/background/index.htm

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:一条边框与background的思考 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/border-and-background.html)

发表评论

请登录后发表评论: