利用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 相关文章推荐
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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
一个程序下载的管理程序(二)
2006/10/09 PHP
php中session退出登陆问题
2014/02/27 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
js评分组件使用详解
2017/06/06 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
javascript实现倒计时提示框
2021/03/02 Javascript
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
房地产开发计划书
2014/01/10 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
大学生自荐材料范文
2014/12/30 职场文书
单位接收函范文
2015/01/30 职场文书
销售会议开幕词
2016/03/04 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python