详解CSS3中使用gradient实现渐变效果的方法


Posted in HTML / CSS onAugust 18, 2015

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。
线性渐变在Webkit下的应用

CSS Code复制内容到剪贴板
  1. -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法  

    第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。
    第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left
    top(左上角)和left bottom(左下角)。
    第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

线性渐变在Mozilla下的应用

语法:

CSS Code复制内容到剪贴板
  1. -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  

参数:

    其共有三个参数,第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left
    top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

css3中实现了背景渐变

CSS Code复制内容到剪贴板
  1. <gradient> = [   
  2.     <linear-gradient> | <radial-gradient> |   
  3.     <repeating-linear-gradient> | <repeating-radial-gradient> ]  

一:线性渐变  

 在CSS3中,可以使用 linear-gradient实现背景线性渐变。

CSS Code复制内容到剪贴板
  1. <linear-gradient> = linear-gradient(  [ [ <angle> | to <side-or-corner> ] ,]?   <color-stop>[, <color-stop>]+ )  <side-or-corner> = [left | rightright] || [top | bottombottom]  

在ff浏览器时需要将样式代码书写成"-moz-linear-gradient",chrome浏览器时需要写成"-webkit-linear-gradient"的形式。
详解CSS3中使用gradient实现渐变效果的方法

 这里颜色值也可以分好多段,如

CSS Code复制内容到剪贴板
  1. background-image: linear-gradient(top#eff6fb#d3e4f3 68%);  

详解CSS3中使用gradient实现渐变效果的方法

CSS Code复制内容到剪贴板
  1. background-image: linear-gradient( left#FF0000#FFA500 13.0%,#FFFF00 26.0%,#0000FF 39.0%,#008000 52.0%,#4B0082 65.0%,#EE82EE 78.0%)  

显示效果:
详解CSS3中使用gradient实现渐变效果的方法

渐变方向也指定关键字。

CSS Code复制内容到剪贴板
  1. background-image: linear-gradient(top left#eff6fb 10%, #d3e4f3 68%);  

效果:
详解CSS3中使用gradient实现渐变效果的方法

渐变方向也可以指定角度。

CSS Code复制内容到剪贴板
  1. background-image: linear-gradient(0deg, #eff6fb 10%, #d3e4f3 68%);  

0deg渐变开始在左侧,90deg的底部,180deg在右侧,270deg在顶部。因此,我们可以认为角度作为反??时针顺序。
如:
详解CSS3中使用gradient实现渐变效果的方法

透明度(Transparency):还支持透明渐变。这是相当有用的,例如,当堆叠多个背景时。这里是两个背景的结合:一张图片,一个白色到透明的线性渐变。

二:径向渐变

径向渐变类似于线性渐变

CSS Code复制内容到剪贴板
  1. <radial-gradient> = radial-gradient(   [ [ <shape> || <size> ] [ at <position> ]? , |     at <position>,    ]?   <color-stop> [ , <color-stop> ]+ )  

1.颜色
直接定义颜色渐变。background: -moz-radial-gradient(red, yellow, #1E90FF);

效果如图:
详解CSS3中使用gradient实现渐变效果的方法

指定位置颜色的渐变:background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
效果如果:
详解CSS3中使用gradient实现渐变效果的方法

2.形状
起始位置一样,形状不一样。

CSS Code复制内容到剪贴板
  1. background-image: -moz-radial-gradient(bottombottom left,circle,redyellow#1E90FF);   
  2. background-image: -moz-radial-gradient(bottombottom left,ellipse,redyellow#1E90FF);  

效果如图:
详解CSS3中使用gradient实现渐变效果的方法

3.大小(Size):size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点。

三:重复渐变(Repeating Gradients)
重复一个渐变,可以使用-moz-repeating-linear-gradient和-moz-repeating-radial-gradient。

CSS Code复制内容到剪贴板
  1. .repeating_radial_gradient_example {       
  2. background: -moz-repeating-radial-gradient(blackblack 5pxwhite 5pxwhite 10px); }    
  3. .repeating_linear_gradient_example {      
  4.   background: -moz-repeating-linear-gradient(top left -45deg, redred 5pxwhite 5pxwhite 10px); }  

HTML / CSS 相关文章推荐
利用CSS3实现自定义滚动条代码分享
Aug 18 HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 #HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 #HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 #HTML / CSS
详解CSS3中@media的实际使用
Aug 04 #HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 #HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 #HTML / CSS
详解CSS中iconfont的使用
Aug 04 #HTML / CSS
You might like
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
python装饰器使用方法实例
2013/11/21 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
详解Python 最短匹配模式
2020/07/29 Python
django中cookiecutter的使用教程
2020/12/03 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
公司开业致辞
2015/07/29 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android