利用CSS3的线性渐变linear-gradient制作边框的示例


Posted in HTML / CSS onJune 02, 2016

一般的app边框描边的线都小于一像素,那么我就像往常一样直接描了1px的边框,虽然是1px可是结果和app里的描边完全不一样“粗了”,所以就在网找了一下看看有没有解决方法,可是找了一会没找到,那咋办,需求方不愿意不要这么粗,那就只能自己解决了。
所以用上个方法联想到了线性渐变(linear-gradient)

CSS Code复制内容到剪贴板
  1. .line li{  bordernone;   
  2.   background-image: -webkit-linear-gradient(#222 50%,transparent 50%);   
  3.   background-image: -moz-linear-gradient(#222 50%,transparent 50%);   
  4.   background-image: -o-linear-gradient(#222 50%,transparent 50%);   
  5.   background-image: linear-gradient(#222 50%,transparent 50%);   
  6.   background-size:  100% 1px;   
  7.   background-repeatno-repeat;   
  8.   background-positionbottombottom;}  
XML/HTML Code复制内容到剪贴板
  1. <ul class="line">  
  2.     <li>linear-gradient</li>  
  3.     <li>linear-gradient</li>  
  4.     <li>linear-gradient</li>  
  5. </ul>  

OK,又出来了,但还是有点瑕疵,那么问题来了,就是改变描边位置(left,top,right,bottom)需要修改参数

如 left描边需要改变:

CSS Code复制内容到剪贴板
  1. background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);   
  2. background-size:  1px 100%;   
  3. background-positionleft;  

具体的都不一一列出了。

利用linear制作复杂的边框效果
另外,在网上看到一种利用linear-gradient属性制作绚丽边框效果的方法。首先给出代码,大家可以在自己的电脑中查看效果:

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2.      
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">     
  4. <head>     
  5.     <meta charset="utf-8" />     
  6.     <title></title>     
  7.     <style>     
  8.         .box {     
  9.             margin80px 30px;     
  10.             width200px;     
  11.             height200px;     
  12.             positionrelative;     
  13.             background#fff;     
  14.             floatleft;     
  15.         }     
  16.      
  17.             .box:before {     
  18.                 content'';     
  19.                 z-index: -1;     
  20.                 positionabsolute;     
  21.                 width220px;     
  22.                 height220px;     
  23.                 top: -10px;     
  24.                 left: -10px;     
  25.             }     
  26.      
  27.         .first:before {     
  28.             background-image: linear-gradient(90deg, yellow, gold);     
  29.         }     
  30.      
  31.         .second:before {     
  32.             background-image: linear-gradient(0deg, orange, red);     
  33.         }     
  34.      
  35.         .third:before {     
  36.             background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
  37.         }     
  38.     </style>     
  39. </head>     
  40. <body>     
  41.     <div class="box first"></div>     
  42.     <div class="box second"></div>     
  43.     <div class="box third"></div>     
  44. </body>     
  45. </html>    

有代码可以看出,其实我们并没有使用border,那么这种边框效果是怎么实现的呢?
总体思路是,我们先定义一个白色的div,在定义一个白色方块大一圈的带颜色的div。两个重叠一下,并且让白色的div覆盖彩色div,就实现了边框的效果。
这里面用到的css知识点很多。
1、:before伪类
通过上面的代码我们看出,其实我们在定义的白色div中定义了一个:before伪类,把彩色方块所有的样式都放在了这里。这是因为使用:before定义可以使得定位更加方便,只要调整top和left为边框的宽度就可以了。同时也是的二者成为一个整体。
2、linear-gradient
现在很多浏览器都支持这个css方法。该方法有以下三种使用模式:
①background:linear-gradient(top,#fff,#000)
这段代码的意思是,从上部开始为白色,到底部为黑色进行过度。
②background:linear-gradient(top,right,#fff,#000)
这段代码关于位置传递了两个参数,top和right,表示从右上放开始,到左下方变化,其他道理与第一个相同。
③background:linear-gradient(30deg,#fff,#000)
这段代码的第一个参数传递的是角度,其实道理和位置是一样的,只是不是从标准的位置开始变化了。那么角度和位置的对应关系是什么呢?根据实验,0度对应bottom,90度对应left,180度对应top,360度对应right。
以上就是利用linear方法实现绚丽边框的代码和解释,大家可以在本地进行实现,以此发现更多新奇的组合实现方法。

HTML / CSS 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 #HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 #HTML / CSS
CSS3实现多重边框的方法总结
May 31 #HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 #HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 #HTML / CSS
CSS中的字体大小设置属性总结
May 24 #HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 #HTML / CSS
You might like
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
请解释流与文件有什么不同
2016/07/29 面试题
学生会个人自荐书范文
2014/02/12 职场文书
工程师岗位职责规定
2014/02/26 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
班级标语大全
2014/06/21 职场文书
单位委托书怎么写
2014/08/02 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书