主页 > 网站建设 >

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

网站建设 2023-01-28 21:38www.1681989.com免费网站

比如这里最终需求如下

html代码

XML/HTML Code复制内容到剪贴板
  1. <ul class="demo">  
  2.     <li>Lady gaga</li>  
  3.     <li>Mariah Carey</li>  
  4.     <li>Adele</li>  
  5.     <li>Avril Lavigne</li>  
  6.     <li>Sarah Brightman</li>  
  7.     <li>Cele Dion</li>  
  8. </ul>  

方案一

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

CSS代码

CSS Code复制内容到剪贴板
  1. .demo li {   
  2.     paddg-left: 15px;   
  3.     le-height: 40px;   
  4. }   
  5. .demo li::after {   
  6.     position: absolute;   
  7.     rightright: 0;   
  8.     bottombottom: 0;   
  9.     left: 0;   
  10.     border-bottom: 1px solid #c;   
  11.     content: "\0020";   
  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方便理解)

CSS Code复制内容到剪贴板
  1. .demo li {   
  2.     paddg-left: 15px;   
  3.     le-height: 40px;   
  4.     background-image: lear-gradient(transparent 39px, #c 39px, #c) no-repeat;   
  5. }   
  6. .demo li:not(:last-child) {   
  7.     background-position: 15px;   
  8. }   
  9. .demo li:hover {   
  10.     background-color: #f3f3f3;   
  11. }  

方案三

在第三种的基础上使用了background-orig

background-orig: border-box | paddg-box | content-box

paddg-box从paddg区域（含paddg）开始显示背景图像。

border-box从border区域（含border）开始显示背景图像。

content-box从content区域开始显示背景图像。

所以我们可以利用paddg-box和content-box解析不同的背景图像（注意是图像）开始区域。来实现，代码如下

CSS Code复制内容到剪贴板
  1. .demo li {   
  2.     paddg-left: 15px;   
  3.     le-height: 40px;   
  4.     background-image: lear-gradient(transparent 39px, #c 39px, #c) no-repeat;   
  5.     background-orig:paddg-box;/background-orig默认值，可不写，我只是为了跟狼蚁网站SEO优化对比而已/  
  6. }   
  7. .demo li:not(:last-child) {   
  8.     background-orig:content-box;   
  9. }   
  10. .demo li:hover {   
  11.     background-color: #f3f3f3;   
  12. }  
上一篇：针对IE6的一些CSS Hack编写时的注意点小结 下一篇：菜单栏 “三” 变形为“X”css3过渡动画

网站设计

Copyright © 2016-2025 www.1681989.com 推火网 版权所有 Power by