文章一   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. Linux(CentOS) 如何查看当前占用CPU或内存最多的K个进程

    一.可以使用以下命令查使用内存最多的K个进程 方法1: ps -aux | sort -k4nr | head -K 如果是10个进程,K=10,如果是最高的三个,K=3 说明:ps -aux中(a指 ...

  2. Sqlserver常用的时间函数---GETDATE、GETUTCDATE、DATENAME

    GETDATE 按 datetime 值的 Microsoft® SQL Server™ 标准内部格式返回当前系统日期和时间.语法GETDATE ( )返回类型datetime注释日期函数可用在 SE ...

  3. SQL的主键和外键约束(转)

    SQL的主键和外键的作用: 外键取值规则:空值或参照的主键值. (1)插入非空值时,如果主键表中没有这个值,则不能插入. (2)更新时,不能改为主键表中没有的值. (3)删除主键表记录时,你可以在建外 ...

  4. android 项目学习随笔十(自定义ProgressBar)

    android:innerRadius 内部半径 android:thickness 厚度 gradient 渐变 android:useLevel="false" 取掉控件自带旋 ...

  5. android 项目学习随笔八(xUtils的BitmapUtils模块)

    xUtils的BitmapUtils模块: 加载bitmap的时候无需考虑bitmap加载过程中出现的oom和android容器快速滑动时候出现的图片错位等现象: 支持加载网络图片和本地图片: 内存管 ...

  6. 如何通过ps -ef|grep tomcat只获得你需要的查询进程,排除掉grep本身的进程信息

    执行命令:ps -ef|grep tomcat|grep /opt/upay3/application/dispatcherTomcat/bin输出的进程信息会显示2个:包括grep本身的进程+你查询 ...

  7. js获取IP地址方法总结_转

    js代码获取IP地址的方法,如何在js中取得客户端的IP地址.原文地址:js获取IP地址的三种方法 http://www.jbxue.com/article/11338.html 1,js取得IP地址 ...

  8. How to create UrlSlug in Asp.Net MVC

    转自:http://www.ehsanghanbari.com/Post/20/how-to-create-urlslug-in-aspnet-mvc UrlSlug Is a way of gene ...

  9. Getting Started with the C# Driver

    1.下载 如果下载的.zip文件,只需要解压即可. 如果安装的.msi文件,它会将C#驱动DLL放在C:\Program Files (x86)\MongoDB\CSharp Driver xxx的位 ...

  10. FTPS加密上传

    公司要求ftp接口不能以明文方式传输,所以adc系统将增加ftps方式 但是在网找了很多方式都无法实现用了方法一 FtpWebRequest request = (FtpWebRequest)WebR ...