CSS3 Gradient 分为线性渐变(linear)径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

  我们来说一下线性渐变:

    

  参数:

  第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示:

  

  

  第一个参数省略时,默认为“180deg”,等同于“to bottom”。

  第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。

  

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

  效果图:

  

  

css3渐变色彩的更多相关文章

  1. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

  2. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  3. css3 渐变记

    css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...

  4. Css3渐变实例Demo(一)

    1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...

  5. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

  6. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  7. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  8. css3渐变详解

    今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...

  9. Web前端方向课程要点:CSS3渐变制作过程

    CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...

随机推荐

  1. 【BZOJ】3621: 我想那还真是令人高兴啊

    http://www.lydsy.com/JudgeOnline/problem.php?id=3621 题意:给两个三角形,问A能否通过旋转伸缩到B. #include <bits/stdc+ ...

  2. Android -- TabHost

    TabHost 也就相当于Windows下的选项框 有两种实现方式 1.  继承TabActivity (已经废弃):从TabActivity中用getTabHost()方法获取TabHost 2. ...

  3. linux系统下yum源的搭建

    1.建立挂载点 系统默认在 /mnt目录 1>创建挂载点 mkdir -p /mnt/cdrom   参数-p是需要时创建目标目录的上层目录,但即使这些目录已存在也不当作错误处理 2>查看 ...

  4. VS2010与水晶报表V13的打包集成小结

    感谢孟子E章提供的技术咨询. 系统配置: Windows 7 + VS2010 , WinForm + DotNet4 + 水晶报表 这里说的打包集成,指的用VS2010的制作的安装包,在安装的时候可 ...

  5. nodejs入门(一)

    1.nodejs简介  Nodejs不是一个js应用.而是一个js运行平台. Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效 2. 1).Nodejs内置了一个HTTP模块 var ...

  6. CSS3+HTML5实现块阴影与文字阴影

    CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本教程分5节介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不 ...

  7. [转载]QQ通讯原理及QQ是怎么穿透内网的

    QQ是一个基于TCP/UDP协议的通讯软件 发送消息的时候是UDP打洞,登陆的时候使用HTTP~因为登陆服务器其实就是一个HTTP服务器,只不过不是常用的那些,那个服务器是腾讯自行开发的!!! 一.登 ...

  8. HDU3732 背包DP

    Ahui Writes Word Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. Daily Scrum 10.29

    今天大家的工作做的还算不错,但是晚些时候遗憾的得知我们的吴文会同学生病住院了,所以她明天的任务暂时保留,再做调整.希望大家在努力学习工作的同时一定要注意身体啊! 下面是今天的Task统计:

  10. C#编码标准

    一.命名约定 1.PascalCasting PascalCasing 每一个单词第一个字母大写,其余字母均小写.例如:FileAccess,ArraySegment等. 除了参数.变量.常量外,所有 ...