所有的人都想停留在那山顶，但是所有的乐趣和成长都是发生在往上爬的过程中。新的一天，早安！
比如这里最终需求如下：
html代码：
XML/HTML Code复制内容到剪贴板
- <ulclass="demo">
- <li>Ladygaga</li>
- <li>MariahCarey</li>
- <li>Adele</li>
- <li>AvrilLavigne</li>
- <li>SarahBrightman</li>
- <li>CelineDion</li>
- </ul>
方案一：
使用伪元素制作一个变宽，并定位在底部。
CSS代码：
CSS Code复制内容到剪贴板
- .demoli{
- padding-left:15px;
- line-height:40px;
- }
- .demoli::after{
- position:absolute;
- rightright:0;
- bottombottom:0;
- left:0;
- border-bottom:1pxsolid#ccc;
- content:"\0020";
- }
- .demoli:not(:last-child)::after{
- left:15px;
- }
- .demoli:hover{
- background-color:#f3f3f3;
- }
方案二：
so cool，使用背景图像（注意是图像）渐变，代码瞬间少了许多。(原文用background，我这里改回background-image方便理解)
CSS Code复制内容到剪贴板
- .demoli{
- padding-left:15px;
- line-height:40px;
- background-image:linear-gradient(transparent39px,#ccc39px,#ccc)no-repeat;
- }
- .demoli:not(:last-child){
- background-position:15px;
- }
- .demoli: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复制内容到剪贴板
- .demoli{
- padding-left:15px;
- line-height:40px;
- background-image:linear-gradient(transparent39px,#ccc39px,#ccc)no-repeat;
- background-origin:padding-box;/*background-origin默认值，可不写，我只是为了跟下面对比而已*/
- }
- .demoli:not(:last-child){
- background-origin:content-box;
- }
- .demoli:hover{
- background-color:#f3f3f3;
- }
以上就是CSS制作边框效果的技巧总结。明白很多事情无法顺着自我的意思，但是发奋用最恰当的方式让事情变成最后自我想要的样貌。强壮是，如果最后事情实在无法实现，那么也能够理解下来，不会失控，而是冷静理智的去想下一步。更多关于CSS制作边框效果的技巧总结请关注haodaima.com其它相关文章！
