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选择器的研究(详解)
Sep 16 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
总结30个CSS3选择器
Apr 13 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 HTML / CSS
css弧边选项卡的项目实践
May 07 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
使用jQuery实现购物车结算功能
2017/08/15 jQuery
JavaScript实现区块链
2018/03/14 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python自动发邮件脚本
2017/03/31 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python for 循环获取index索引的方法
2019/02/01 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Python list运算操作代码实例解析
2020/01/20 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
最新奶茶店创业计划书
2014/01/25 职场文书
个人求职信范例
2014/01/29 职场文书
担保书怎么写
2014/04/01 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
奖学金感谢信
2015/01/21 职场文书
2015年端午节活动方案
2015/05/05 职场文书
工作简历的自我评价
2019/05/16 职场文书
z-index不起作用
2021/03/31 HTML / CSS
代码复现python目标检测yolo3详解预测
2022/05/06 Python
Hive日期格式转换方法总结
2022/06/25 数据库