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. R绘图系统中的坐标系

    在R语言中,对于图中的点来说,有很多种坐标系来进行定位 举个例子: par(omi = c(1, 1, 1, 1), mai = c(1, 1, 1, 1), mfrow = c(1, 2)) plo ...

  2. objelement = event.target || event.srcElement;

    objelement = event.target || event.srcElement; function updateProductVideo(e){ e = window.event || a ...

  3. Nginx负载均衡 ssl原理 生成ssl密钥对 Nginx配置ssl

  4. Linux中Subversion配置实例

    一.安装 yum install subversion 二.配置 本系统采用为每个项目单独建一版本库的策略.配置文件,密码文件,访问控制文件等都放在版本库的conf目录下. 所以每次开始一个新项目都必 ...

  5. 史上最全的 Sublime Text 汉化、插件安装合集

    0.前言 本文用于给新手小白用户指明前进方向.不用做商业推广. 其次,鼓舞购买正版.拒绝盗版. 好了.口号喊完,接下来就直接開始正文. 1. Sublime Text 介绍 首先在開始前,先来介绍一下 ...

  6. RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序”

    转自http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/08/2203153.html 备忘 rpm 执行安装包 二进制包(Binary ...

  7. 【WP8】Uri关联启动第三方App

    在WP8中支持启动第三方应用程序,比如在App1中可以打开App2,你可以在你的应用程序中直接打开QQ,也可以让其他开发者调用你的APP,例如:软件盒子 下面演示被调用方和调用方的使用方法,新建两个项 ...

  8. storm学习之六-使用Maven 生成jar包多种方式

    Maven可以使用mvn package指令对项目进行打包,如果使用java -jar xxx.jar执行运行jar文件,会出现"no main manifest attribute, in ...

  9. unity之UGUI屏幕分辨率調整

    1.Canvas的屬性配置: 2.Canvas Scaler的屬性配置: 3.根據不同的屏幕比例動態寫改碩放基準: public float standard_width = 800f; //初始宽度 ...

  10. linux环境中iostat命令的安装,解决-bash: iostat: command not found问题

    需求说明: 今天在测试环境的主机上,准备通过iostat来查看系统的io情况,发现没有该命令 [root@testvm Packages]# iostat -bash: iostat: command ...