利用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属性background-size使用指南
Dec 09 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
Jul 19 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
Canvas 文本填充线性渐变的使用详解
Jun 22 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
Dec 07 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
Dedecms常用函数解析
2008/02/01 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
自动更新作用
2006/10/08 Javascript
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
jquery使用jxl插件导出excel示例
2014/04/14 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
JS实现轮播图效果
2020/01/11 Javascript
python爬虫获取多页天涯帖子
2018/02/23 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
python logging模块的使用详解
2020/10/23 Python
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
小班秋游活动方案
2014/02/22 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
护理自荐信
2019/05/14 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
Linux中文件的基本属性介绍
2022/06/01 Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers