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

比如这里最终需求如下：

html代码：

1.   
2.     
3. Lady gaga
  
4.     
5. Mariah Carey
  
6.     
7. Adele
  
8.     
9. Avril Lavigne
  
10.     
11. Sarah Brightman
  
12.     
13. Celine Dion
  
14.   

方案一：

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

CSS代码：

1. .demo li {   
2.     padding-left: 15px;   
3.     line-height: 40px;   
4. }   
5. .demo li::after {   
6.     position: absolute;   
7.     rightright: 0;   
8.     bottombottom: 0;   
9.     left: 0;   
10.     border-bottom: 1px solid #ccc;   
11.     content: "020";   
12. }   
13. .demo li:not(:last-child)::after {   
14.     left: 15px;   
15. }   
16. .demo li:hover {   
17.     background-color: #f3f3f3;   
18. }  

方案二：

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

1. .demo li {   
2.     padding-left: 15px;   
3.     line-height: 40px;   
4.     background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;   
5. }   
6. .demo li:not(:last-child) {   
7.     background-position: 15px;   
8. }   
9. .demo li:hover {   
10.     background-color: #f3f3f3;   
11. }  

方案三：

在第三种的基础上使用了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解析不同的背景图像（注意是图像）开始区域。来实现，代码如下：

1. .demo li {   
2.     padding-left: 15px;   
3.     line-height: 40px;   
4.     background-image: linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;   
5.     background-origin:padding-box;  
6. }   
7. .demo li:not(:last-child) {   
8.     background-origin:content-box;   
9. }   
10. .demo li:hover {   
11.     background-color: #f3f3f3;   
12. }