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. springboot form 提交集合 list

    前端代码: function btnSubmit(data) { var url = $('form').attr("action"); $.ajax({ url: url, ty ...

  2. Docker镜像相关

    一.中间镜像 通过持续集成工具Jenkins构建Docker镜像并运行容器,采用的是Docker Compose来进行编排构建运行的.但是每次构建完毕以后通过docker images命令查询,可以发 ...

  3. 内存管理 初始化(五)kmem_cache_init 初始化slab分配器(上)

    看了下kmem_cache_init,涉及到不同MIGRATE间的buddy system的迁移,kmem_cache的构建,slab分配器头的构建.buddy system的伙伴拆分. 对于SMP系 ...

  4. 移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决

    flexible.js是淘宝推出的一款移动端手机自适应的库,源码内容很简洁,当网页使用了该库之后,页面会在head中加入对应的页面响应式的meta标签. 当使用flexible.js的时候,引入百度联 ...

  5. bat 变量作用域

    set answer=one if true equ true ( set answer=two echo %answer% ) echo Argument is %answer% pause

  6. 五步整理你的css文件

    鉴于实在无法忍受那种写一句就换一行的css写法,有个项目中的一个css文件竟然高达6000多行,看着实在蛋疼,无实今天下定决心整理一下,在DW里可以用正则很好的进行替换,步骤如下: 一:\r => ...

  7. Python一个简单的数据库类封装

    #encoding:utf-8 #name:mod_db.py '''使用方法:1.在主程序中先实例化DB Mysql数据库操作类.      2.使用方法:db=database()  db.fet ...

  8. [CNN] Face Detection

    即将进入涉及大量数学知识的阶段,先读下“别人家”的博文放松一下. 读罢该文,基本能了解面部识别领域的整体状况. 后生可畏. 结尾的Google Facenet中的2亿数据集,仿佛隐约听到:“你们都玩儿 ...

  9. Android的WebView控件载入网页显示速度慢的究极解决方案

    Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] 秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国 ...

  10. Spring @Scheduled定时任务动态修改cron参数

    在定时任务类上增加@EnableScheduling注解,并实现SchedulingConfigurer接口.(注意低版本无效) 设置一个静态变量cron,用于存放任务执行周期参数. 另辟一线程,用于 ...