利用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 相关文章推荐
CSS3实现简易版的刮刮乐效果
Sep 27 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
May 03 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
css3 文字断裂效果
Apr 22 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
德劲1104的电路分析与改良
2021/03/01 无线电
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
空指针到底是什么
2012/08/07 面试题
使用C#编写创建一个线程的代码
2013/01/22 面试题
酒店营销策划方案
2014/02/07 职场文书
公司聘任书模板
2014/03/29 职场文书
听课评语大全
2014/04/30 职场文书
安全教育月活动总结
2014/05/05 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
环卫工作汇报材料
2014/10/28 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
年会邀请函范文
2015/01/30 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android