文章一   http://www.runoob.com/css3/css3-gradients.html

文章二:http://www.w3cplus.com/content/css3-gradient

自己试验一点:

e.g: background:linear-gradient(90deg,red 20%,blue 40%,yellow 50%,green 60%)的含义解释: 

1:90deg表示从左往右(等同于to right),0deg表示从下往上(to top)

2:颜色可以任意多个,中间的百分比(或者用长度也行)表示颜色位置,具体的本例含义经测试理解如下:

从开始到20%位置处为纯红色,20%-40%处为红蓝渐变(40%处为纯蓝色),40%-50%处为蓝黄渐变区域(50%处是纯黄),50%-60%为黄绿渐变区域,60%之后到结束为纯绿色。

如果后面的颜色百分比小于前面的,则后面的数字无效,其大小按照前面的那个数字计算。(如50%如果变为30%,则此30%无效,将会按照40%计算)。

P.S.  以后这种细节性的东西在闲暇时再研究,不能浪费时间和精力在这上面(现在深深的感觉到精力有限啊)。GO

background:linear-gradient()的更多相关文章

  1. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  2. CSS3 & gradient & color & background

    CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/ ...

  3. 兼容当前多浏览器的渐变颜色背景gradient的写法

    经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对gradi ...

  4. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  5. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  6. 兼容当前五大浏览器的渐变颜色背景gradient的写法

    <style type="text/css" media="screen"> #gradient { width: 200px; height: 2 ...

  7. CSS3 Gradient渐变效果

    最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  8. 【01】CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变)(转)

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  9. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  10. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

随机推荐

  1. 实施费用也能DIY--走出软件作坊:三五个人十来条枪 如何成为开发正规军(九)[转]

    上次咱们讲完了开发费用的计算,很多人在后面跟帖在那里算费用. 有人说:你把程序员都不当人,94天,一天都不休息啊. 我想答曰:94天,是工作时间.不算双休日在里面.也就是说,实际的开发周期长度是94+ ...

  2. NOIP201208同余方程

    NOIP201208同余方程 描述 求关于x的同余方程ax ≡ 1 (mod b)的最小正整数解. 格式 输入格式 输入只有一行,包含两个正整数a, b,用一个空格隔开. 输出格式 输出只有一行,包含 ...

  3. 字符串核对之Boyer-Moore算法

    算法说明: 在计算机科学里,Boyer-Moore字符串搜索算法是一种非常高效的字符串搜索算法.它由Bob Boyer和J Strother Moore设计于1977年.此算法仅对搜索目标字符串(关键 ...

  4. 统计SQL语句耗时百分比

    -- sql语句耗时百分比 declare @tmptb table(id int,name varchar(50),total_worker_time bigint,rate varchar(50) ...

  5. 为什么drop table的时候要在checking permissions花很长时间?

    昨天,我drop一个表的时候在checking permissions花了20s+,这个时间花在哪里了呢?经常查找发现我的配置文件innodb_file_per_table=1的,innodb需要遍历 ...

  6. Android剪切板传递数据传递序列化对象数据

    一.剪切板的使用介绍 1. 剪切板对象的创建 使用剪切板会用到,ClipboardManager对象,这个对像的创建不可以使用构造方法,主要是由于没有提供public的构造函数(单例模式),需要使用A ...

  7. html+css复习之第2篇 | javascript

    1. java 中定义数组和对象: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {firstName:&quo ...

  8. ACM题目————士兵杀敌(四)

    描述 南将军麾下有百万精兵,现已知共有M个士兵,编号为1~M,每次有任务的时候,总会有一批编号连在一起人请战(编号相近的 人经常在一块,相互之间比较熟悉),最终他们获得的军功,也将会平分到每个人身上, ...

  9. c# UDP通信 列子

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. Borg Maze 分类: POJ 2015-07-27 15:28 5人阅读 评论(0) 收藏

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9971   Accepted: 3347 Description The B ...