CSS3中颜色线性渐变实战


Posted in HTML / CSS onJuly 18, 2015

线性渐变可以设置3个参数值:方向、起始颜色、结束颜色。最简单的模式只需要定义起始颜色和结束颜色,起点、终点和方向默认自元素的顶部到底部。下面举例说明:

CSS Code复制内容到剪贴板
  1. .test{   
  2.   background:linear-gradient(redblue);   
  3. }  

上述代码的效果如图所示。
CSS3中颜色线性渐变实战

最简单的线性渐变效果

如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码:

CSS Code复制内容到剪贴板
  1. .test {   
  2.   background:-webkit-linear-gradient(redblue);             /*webkit核心浏览器兼容代码*/  
  3.   background:-o-linear-gradient(redblue);                       /*Opera浏览器兼容代码*/  
  4.   background:-moz-linear-gradient(redblue);                 /*Firefox 浏览器兼容代码*/  
  5.   background:linear-gradient(redblue);                             /*标准语法要放在最后 */  
  6. }  

线性渐变可以指定渐变的方向,如下例:

CSS Code复制内容到剪贴板
  1. .test {   
  2.   background:-webkit-linear-gradient(leftredblue);      /*webkit核心浏览器兼容代码*/  
  3.   background:-o-linear-gradient(leftredblue);                /*Opera浏览器兼容代码*/  
  4.   background:-moz-linear-gradient(leftredblue);                   /*Firefox 浏览器兼容代码*/  
  5.   background:linear-gradient(to rightrightredblue);             /*标准语法要放在最后 */  
  6. }  

上述代码的效果如图所示,设置了left/to right参数后,渐变方向从自上而下变成了自左向右。
CSS3中颜色线性渐变实战

指定起点

注意:标准写法的渐变方向格式如上例中的“to right”,在火狐和Opera浏览器下则使用right,而对于webkit核心浏览器则使用起点位置left来表示。
渐变方向还可以使用角度来表示,0deg、90deg、180deg和270deg分别对应to top、to right、to bottom和to left,例如:

CSS Code复制内容到剪贴板
  1. .test {   
  2.   background:-webkit-linear-gradient(45deg, redblue);          /*webkit核心浏览器兼容代码*/  
  3.   background:-o-linear-gradient(45deg, redblue);                            /*Opera浏览器兼容代码*/  
  4.   background:-moz-linear-gradient(45deg, redblue);             /*Firefox 浏览器兼容代码*/  
  5.   background:linear-gradient(45deg, redblue);                       /*标准语法 */  
  6. }  

效果如图所示。
CSS3中颜色线性渐变实战

图5.11 指定渐变方向为45°
线性渐变不止支持两种颜色的渐变,还可以添加任意种颜色,比如可以使用线性渐变构造一个彩虹效果,如图5.12所示。
CSS3中颜色线性渐变实战

彩虹色

上图所示的彩虹色效果代码如下:

CSS Code复制内容到剪贴板
  1. .test {   
  2.   background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   
  3.   background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   
  4.   background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   
  5.   background:linear-gradient(to rightrightred,orange,yellow,green,blue,indigo,violet);   
  6. }  
HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 #HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 #HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 #HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 #HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 #HTML / CSS
举例详解CSS3中的Transition
Jul 15 #HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 #HTML / CSS
You might like
php摘要生成函数(无乱码)
2012/02/04 PHP
php实现生成验证码实例分享
2016/04/10 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
javascript ajax的5种状态介绍
2014/08/18 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
Java的五个基础面试题
2016/02/26 面试题
Java面试笔试题大全
2016/11/23 面试题
长安大学毕业生自我鉴定
2014/01/17 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
新郎新娘答谢词
2015/01/04 职场文书
欢迎词范文
2015/01/27 职场文书
党员个人自我评价
2015/03/03 职场文书
Mysql中常用的join连接方式
2022/05/11 MySQL