CSS制作边框效果的技巧总结

比如这里最终需求如下：

html代码：

XML/HTML Code复制内容到剪贴板

<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代码：

CSS Code复制内容到剪贴板

.demo li {   

    padding-left: 15px;   

    line-height: 40px;   

}   

.demo li::after {   

    position: absolute;   

    rightright: 0;   

    bottombottom: 0;   

    left: 0;   

    border-bottom: 1px solid #ccc;   

    content: "020";   

}   

.demo li:not(:last-child)::after {   

    left: 15px;   

}   

.demo li:hover {   

    background-color: #f3f3f3;   

}  

方案二：

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

CSS Code复制内容到剪贴板

.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解析不同的背景图像（注意是图像）开始区域。来实现，代码如下：

CSS Code复制内容到剪贴板

.demo li {   

    padding-left: 15px;   

    line-height: 40px;   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!