css3渐变色彩
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渐变色彩的更多相关文章
- css3渐变(Gradients)
<html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- css3 渐变记
css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...
- Css3渐变实例Demo(一)
1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- css3渐变详解
今天总结渐变的问题,渐变分为线性渐变.径向渐变.呼呼,废话少说, 线性渐变:background:linear-gradient(设置渐变形式,第一个颜色起点,中间颜色点 中间颜色的位置,结束点颜色) ...
- Web前端方向课程要点:CSS3渐变制作过程
CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...
随机推荐
- javascript new function()
// 执行的func生成一个空对象,如果有return就会把生成的func对象抛弃function func() {} alert(temp instanceof func) function fun ...
- 【BZOJ】2924: [Poi1998]Flat broken lines
题意 平面上有\(n\)个点,如果两个点的线段与\(x\)轴的角在\([-45^{\circ}, 45^{\circ}]\),则两个点可以连线.求最少的折线(折线由线段首尾相连)使得覆盖所有点. 分析 ...
- POJ 1106 Transmitters(计算几何)
题目链接 切计算几何,感觉计算几何的算法还不熟.此题,枚举线段和圆点的直线,平分一个圆 #include <iostream> #include <cstring> #incl ...
- SQL Server 父子迭代查询语句,树状查询(转)
-- Get childs by parent id WITH Tree AS ( SELECT Id,ParentId FROM dbo.Node P WHERE P.Id = -- parent ...
- viso 由于形状保护和/或图层属性设置不能进行编辑
viso 由于形状保护和/或图层属性设置不能进行编辑 2003: 若要变通解决此问题,删除 从删除 的保护属性,当您尝试删除一个受保护的组件.若要这样做,请按照下列步骤操作:在 Visio 2003或 ...
- UE编辑器FTP无法连接
解决办法:http://wenwen.sogou.com/z/q197743020.htm 无法从ue连接到主机,一直就是这样的状态 1. ftp帐户密码都没有问题: 2. 后台主机也没有问题: 3. ...
- 数位DP HDU3555
Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others)Total Submi ...
- 【HDU4630 No Pain No Game】 dp思想+线段树的离线操作
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4630 题意:给你n个数据范围在[1,n]中的数,m个操作,每个操作一个询问[L,R],让你求区间[L, ...
- IP地址的分类与寻址
IP地址:有一种标识符,被TCP/IP协议簇的IP层用来标识 连接到因特网的设备.IP协议的第4版IPv4地址是32位地址,是连接地址,定义了每一个连接到因特网上的设备(可以认为是主机的别名),而不是 ...
- Mysql日期时间大全
MySQL日期时间函数大全 DAYOFWEEK(date) 返回日期date是星期几(1=星期天,2=星期一,--7=星期六,ODBC标准)mysql> select DAYOFWEEK('1 ...