文章一   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. CSS 文字阴影(text-shadow)怎么用

    textShadow="1px 1px 1px #ff0000" textShadow="水平位移 垂直位移 模糊半径 阴影颜色"

  2. iOS,破冰!

    首发:个人博客,更新&纠错&回复 iOS,破冰! 今年学的技术,以iOS自学为成本最高昂:花几千块买了台mac mini电脑,又前后买了6本书籍,从头到尾是30天时间,当然,这30天里 ...

  3. android 学习随笔一(配置调试与基础)

    一.基础与开发环境安装配置 Memory Options: VM Heap表示每个应用所能占用的最大内存. Android 项目目录结构 SRC java源码 android.jar 导入jar才能使 ...

  4. DELPHI出现无法加载dclite50.bpl的解决办法(转)

    现象: Borland Integrated Translation Environment 加载出错 解决办法: 我的电脑--->(鼠标右键)属性--->高级--->(性能)设置- ...

  5. vsftp不同帐号的目录和权限

    搭建FTP服务器,供虚拟用户使用,实现不同用户具有不同家目录和权限. 1.用户peter的家目录为/var/ftp/vuserdir/peter,他只有下载权限,没有其他权限(创建目录.重命名.删除. ...

  6. List对象排序的通用方法

    转自 @author chenchuang import java.lang.reflect.InvocationTargetException;import java.lang.reflect.Me ...

  7. 【Pro ASP.NET MVC 3 Framework】.学习笔记.1.主要语言特性

    C# 是一个富有特性的语言,并不是所有的程序员都熟悉本书依赖的所有特性.在本章,我们看看作为一个好的MVC程序员需要知道的C#特性. 1 C#主要特性 } 1.1 使用扩展方法 扩展方法 在你不能拥有 ...

  8. GCD 多线程同步

    @property (strong, nonatomic) dispatch_queue_t barrierQueue; _barrieQueue = dispatch_queue_create(&q ...

  9. JavaScript DOM 编程艺术(第2版)读书笔记(5)

    最佳实践 平稳退化 网站的访问者完全有可能使用的是不支持Javascript的浏览器,还有一种可能是虽然浏览器支持Javascript,但用户已经禁用它了.如果没有考虑到这种情况,人们在访问你们的网站 ...

  10. Oracle字符集设置

    客户端与服务端字符集不一致会造成乱码问题. 在服务端: sql>SELECT * FROM NLS_DATABASE_PARAMETERS; 在查询结果中关注如下参数: nls_language ...