CSS制作边框效果的方法分享
来源：爱站网时间：2018-08-22编辑：网友分享
本篇文章介绍了CSS制作边框效果的方法分享，下面我们就来看看详细的教程，需要的朋友可以参考下。
本篇文章介绍了CSS制作边框效果的方法分享，下面我们就来看看详细的教程，需要的朋友可以参考下。
比如这里最终需求如下：
html代码：
XML/HTML Code复制内容到剪贴板
- ul class="demo">
- li>Lady gagali>
- li>Mariah Careyli>
- li>Adeleli>
- li>Avril Lavigneli>
- li>Sarah Brightmanli>
- li>Celine Dionli>
- 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: "\0020";
- }
- .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;
- 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;
- }
以上就是CSS制作边框效果的方法分享的全部内容介绍了，希望小编整理的相关知识和资料都对你们有所帮助，更多内容请继续关注爱站技术频道网站！
