gradient语法:

  -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )  // chrome的新版写法和FF的一致,只要改版前缀即可

    第一个参数:指定渐变方向。例如:top,从上向下渐变;left,从左向右渐变; left top,从左上向右下渐变

    第二个参数:指定起始点的颜色值

    第三个参数:指定结束点的颜色值

  还可以加参数,如:

  background: -moz-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);

    可以指定多个颜色值,如果不同时指定百分比,则平均分配位置,否则,通过指定某个颜色值渐变到百分之多少的位置。

  还可以指定角度:

  background: -moz-linear-gradient(left 30deg, #ace, #f96);

    如果设置left,不设置角度,则为从左到右渐变;

    如果设置left,同时设置90deg,则为从上到下渐变;

  background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);(径向渐变)

    第一个参数指定位置:bottom left指从左下角开始渐变

    第二个参数指定渐变的形状:ellipse指椭圆形渐变

    第三到第六个参数指定渐变的颜色,同样可以指定百分比

  

    

  

css3整理--gradient的更多相关文章

  1. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  2. css3整理-方便查询使用

    最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...

  3. css3之gradient

    radial-gradient The CSS radial-gradient() function creates an <image> which represents a gradi ...

  4. css3整理--filter

    只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filt ...

  5. css3整理--clip

    clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fi ...

  6. css3整理--::selection

    ::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Fi ...

  7. css3整理--calc()

    calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的widt ...

  8. css3整理--media

    media语法: <link rel="stylesheet" media="screen and (max-width: 600px)" href=&q ...

  9. css3整理--box-sizing

    box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的 ...

随机推荐

  1. WAS6.1连接SQL Server2008数据库连接池配置

    原文链接:http://www.cnblogs.com/lyr2012/archive/2012/06/13/2547804.html 说明:该步骤只适用与websphere 6.1.0.15之前的版 ...

  2. Oracle触发器给表自身的字段重新赋值出现ORA-04091异常

    业务描述如下: 在插入一个表的时候,需要根据一个字段的值更新另一个字段的值.当然也可以通过程序就能很简单得实现,只是这个字段只是数据交换用,和系统主业务没关系,不想修改程序,所以才用触发器的方式实现. ...

  3. 绘制你的第一个图表(jquery-flot-line-chart)

    事前准备 首先, 请先确定你已经下载了Flot档案, 如果还没有的话可以先回到前一章 去下载. 这是你绘制的第一张图, 我们用最常用的折线图当例子, 折线图常被用来显示一段时间间隔趋势的走向, 常见的 ...

  4. 面试的角度诠释Java工程师(一)

    前言: 我相信每一个程序员都是为了生活而努力着的.很多人因为兴趣,从此踏上了这条‘烧脑大行动’的金桥:也有很多人因为梦想和执着,奋不顾身融入这个职业:还有很多人因为被现实逼得太无奈,不得不为自己.为家 ...

  5. 性能监控-TP理解

    首先给出Google到的答案: The tp90 is a minimum time under which 90% of requests have been served. tp90 = top ...

  6. 深入解析Java AtomicInteger原子类型

    深入解析Java AtomicInteger原子类型 在并发编程中,需要确保当多个线程同时访问时,程序能够获得正确的结果,即实现线程安全.线程安全性定义如下: 当多个线程访问一个类时,无论如何调度运行 ...

  7. 使用java启动mybatis generator

    1.java工程目录结构: |src/main/java |com.leslie.mybatis.generator |MybatisGeneratorUtil.java |src/main/reso ...

  8. cocos2d-x 3.0 在lua中调用自定义类

    环境 windows8, cocos2d-x 3.0, 现在开始安装需要的一些其它包 1. 按README.mdown文档上面要求的, 下载在windows下要安装的东东, 主要就是python2.7 ...

  9. Oracle之表空间基于时间点的恢复

    记一次优化过程中:一次误操作,在不影响其他表空间的情况下:采用表空间基于时间点的恢复(TSPITR)方法恢复数据的过程. 1.TSPITR恢复原理    TSPITR目前最方便的方法是使用RMAN进行 ...

  10. ch3:文件处理与异常

    如何从文件读入数据? python中的基本输入机制是基于行的: python中标准的“打开-处理-关闭”代码: the_file=open('文件全称') #处理文件中的数据 the_file.clo ...