CSS制做边框实际效果的技能总结

日期：2021-03-18 类型：科技新闻 

关键词：小游戏源代码，互动小游戏微信，自制小游戏，html5游戏，制作游戏大概多少钱

例如这里最后要求以下：

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>Celine Dion</li>  
  8. </ul>  

计划方案1：

应用伪元素制做1个变宽，并精准定位在底部。

CSS编码：

CSS Code拷贝內容到剪贴板
  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: "\0020";   
  12. }   
  13. .demo li:not(:last-child)::after {   
  14.     left: 15px;   
  15. }   
  16. .demo li:hover {   
  17.     background-color: #f3f3f3;   
  18. }  

计划方案2：

so cool，应用情况图象（留意是图象）渐变色，编码一瞬间少了很多。(原文用background，我这里改回background-image便捷了解)

CSS Code拷贝內容到剪贴板
  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. }  

计划方案3：

在第3种的基本上应用了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拷贝內容到剪贴板
  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;/*background-origin默认设置值，可不写，我只是以便跟下应对比罢了*/  
  6. }   
  7. .demo li:not(:last-child) {   
  8.     background-origin:content-box;   
  9. }   
  10. .demo li:hover {   
  11.     background-color: #f3f3f3;   
  12. }  
上一篇：淄博市app开发设计 返回下一篇：没有了