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. Nginx安装 默认虚拟主机 Nginx用户认证 Nginx域名重定向

    Nginx安装 cd /usr/local/src (http://nginx.org/en/download.html) wget http://nginx.org/download/nginx-1 ...

  2. 用instr 直接取最右端的点的位置:

    用instr 直接取最右端的点的位置: SQL> select substr('/upload/UserFiles/..ea85a945e72bc71fcffca399_140.jpg',ins ...

  3. jQuery:jQuery性能优化28条建议

    http://www.xue5.com/WebDev/jQuery/671700.html 直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将 ...

  4. USBWebServer 中文便携版 快速搭建 PHP/MySQL 网站服务器环境

    如果你是一位 WEB 开发者,或正在学习网页编程,你一定会发现,每到一台新电脑上想要在本地调试测试/运行网站代码都得搭建配置一遍 WAMP (Win.Apache.PHP.MySQL) 环境简直烦透了 ...

  5. Redis Crackit漏洞利用和防护

    注意:本文只是阐述该漏洞的利用方式和如何预防.根据职业道德和<中华人民共和国计算机信息系统安全保护条例>,如果发现的别人的漏洞,千万不要轻易入侵,这个是明确的违法的哦!!! 目前Redis ...

  6. QT基础:QMainWindow学习小结

    简述 普通的桌面应用程序有个共同的特性,有菜单栏.工具栏.状态栏.中央窗口等部件.菜单栏其实可以看成是一个窗口,菜单栏中的每一个菜单也可以看成一个窗口,每个部件基本都可以认为是一个窗口.那么这些典型的 ...

  7. html实体转换

    摘要: 在 HTML 中,某些字符是预留的.在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签.如果希望正确地显示预留字符,我们必须在 HTML 源代码中 ...

  8. SSL延迟有多大 (Https)

    据说,Netscape公司当年设计SSL协议的时候,有人提过,将互联网所有链接都变成HTTPs开头的加密链接. 这个建议没有得到采纳,原因之一是HTTPs链接比不加密的HTTP链接慢很多.(另一个原因 ...

  9. VIM_manual

    VIM命令---Vi IMproved, a programmers text editor文本编辑 vim不同模式切换 输入模式 末行模式 光标移动 复制-粘贴-删除 可视模式 末行模式下的操作 v ...

  10. 【代码审计】CLTPHP_v5.5.3后台任意文件删除漏洞分析

      0x00 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chich ...