铁雪资源网 Design By www.gsvan.com

比如这里最终需求如下:

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

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>  

方案一:

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

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. }  

方案二:

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. }  

方案三:

在第三种的基础上使用了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. }  
标签:
background,边框

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“CSS制作边框效果的技巧总结”

暂无CSS制作边框效果的技巧总结的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?