脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

前端开发者   发布时间：2016-05-27 09:49:10   作者：佚名   我要评论
边框在Web页面的内容块中非常常用,这里为大家整理了CSS制作边框效果的技巧总结,尤其是第三种方案的background-origin利用十分讨巧,需要的朋友可以参考下

比如这里最终需求如下：

2016526115057189.png (330×250)

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

相关文章

  • css background-attachment属性进阶

    前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式
    2017-03-08

  • css 背景固定样式background-attachment属性基础

    这篇文章主要为大家介绍了在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动,需要的朋友可以参考下
    2017-03-08

  • css background 背景图的设置方法

    下面小编就为大家带来一篇css background 背景图的设置方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-30

  • CSS background全部汇总

    下面小编就为大家带来一篇CSS background全部汇总。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-19

  • CSS的background属性及CSS3的背景图片设置总结

    这篇文章主要介绍了CSS的background属性及CSS3的背景图片设置总结,背景图片的显示区域和定位是非常值得注意的地方,需要的朋友可以参考下
    2016-06-13

  • 详解使用CSS固定页面背景图片位置的方法

    固定背景图片的通常方法就是把background-attachment设成fix,进一步的话自然则是用background-position,下面来详解使用CSS固定页面背景图片及位置的方法:
    2016-05-17

  • 使用CSS3来实现滚动视差效果的教程

    这篇文章主要介绍了使用CSS3来实现滚动视差效果的教程,主要使用到了background-attachment属性,需要的朋友可以参考下
    2015-08-24

  • css 中background 设置文本框背景图 的方法

    这篇文章主要介绍了css 中background 设置文本框背景图 的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-07-22

最新评论

关注微信公众号

扫一扫