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. 警惕自己,不断学习c++【转】

    每天早上起床看一遍,时刻警惕自己,每天至少要浏览http://www.cplusplus.com 1.把C++当成一门新的语言学习(和C没啥关系!真的.):2.看<Thinking In C++ ...

  2. Maven_如何为开发和生产环境建立不同的配置文件 --我的简洁方案

    其实也是最近才看Maven, 以前都是用ant+ivy, 对于轻量级的项目来说足够了, 而且非常灵活. 看了看Maven, 约定.... 现在编程都说约定, 约定是挺好, 问题是超出约定的事情太多了, ...

  3. 李洪强iOS经典面试题124

    1. Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? 答: Object-c的类不可以多重继承;可以实现多个接口,通过实现 ...

  4. poj 2325 Persistent Numbers

    简单的贪心和高精度运算,主要还是要读懂题. #include"iostream" #include"stdio.h" #include"string& ...

  5. AOP 学习

    学习 Spring.Net 的AOP 的时候,在做一个简单的测试例子的时候,配置文件和代码逻辑都是没问题的,但始终报这样一个异常: 无法将类型为“CompositionAopProxy_1e76f37 ...

  6. HttpSessionListener和HttpSessionBindingListener监听session的销毁

    1. 使用HttpSessionListener public class OnlineUserListener implements HttpSessionListener { public voi ...

  7. 讨论一下js获取响应中后台传回来的BigInteger类型的数字时,后几位会自动变为0的问题

    后台返回的json:{"data":12345678912345678912} 在js中获取该data得到的值为:12345678912345680000 后经过实验发现,只有数字 ...

  8. SPFA导读及介绍(转载)

    适用范围:给定的图存在负权边,这时类似Dijkstra等算法便没有了用武之地,而Bellman-Ford算法的复杂度又过高,SPFA算法便派上用场了. 我们约定有向加权图G不存在负权回路,即最短路径一 ...

  9. find xargs exec rm

    有时候比如我们删除上万行的文件种的几千行需要怎么做呢 如果配合find 和exec 因为exec有个内存溢出的可能所以一般都会有控制. 例如: find . -name *.log -exec rm ...

  10. 使用JSch实现SFTP文件传输

    1.JSch开发包下载 http://www.jcraft.com/jsch/ 目前最新版本为: jsch - 0.1.51 2.简单例子,列出指定目录下的文件列表 import  java.util ...