//由上至下变色

background:-moz-linear-gradient( top,#f9b347,#f4ad40,#f9b347);  
background:-webkit-gradient(linear,0 0, 0 100%,from(#f4ad40),to(#f9b347));       /*Old gradient for webkit*/
background:-webkit-linear-gradient(top,#f9b347,#f4ad40,#f9b347);           /*new gradient for webkit*/
-o-linear-gradient(top,#f9b347,#eba232,#f9b347);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#eba232, endColorstr=#f9b347);     /*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#eba232, endColorstr=#f9b347)";     /*IE8+ ，不支持圆角*/

// radial-gradient（径向渐变-支持-moz-和-webkit-）

//filter: blur(2px); 模糊

css3 --linear-gradient-渐变色的更多相关文章

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

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

  2. Css3 圆角和渐变色问题(IE9)

    border-radius: 4px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#569B0E', endC ...

  3. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  4. css3之gradient

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

  5. css3整理--gradient

    gradient语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, & ...

  6. css3实现border渐变色

    案例1 .box{ width: 100px; height: 100px; border:10px solid #ddd; border-image: -webkit-linear-gradient ...

  7. css3渐变gradient

    参考: http://www.w3cplus.com/content/css3-gradient

  8. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  9. css3 Gradient背景

    css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...

  10. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

随机推荐

  1. nodeJs 使用 express-http-proxy 转发请求

    开发过程中经常需要用到 nodeJs做转发层 使用express配合 express-http-proxy 可以轻松的完成转发 使用过程: 安装 express-http-proxy npm inst ...

  2. Django 命令

    django #安装: pip3 install django 添加环境变量 #1 创建project django-admin startproject mysite ---mysite ---se ...

  3. Nginx 安装学习笔记(1.安装和启动)

    centos7 编译安装和启动.停止https://www.cnblogs.com/xingyunblog/p/9072553.html 一.安装nginx 1.下载 wget http://ngin ...

  4. Working with Excel Files in Python

    Working with Excel Files in Python from: http://www.python-excel.org/ This site contains pointers to ...

  5. nginx日志 logrotate配置

    nginx 日志 logrotate配置如下: /var/log/nginx/*.log { daily missingok rotate 20 compress delaycompress noti ...

  6. Lock和Static使用说明和区别

    private static object lockInsertObj = new object(); lock (lockInsertObj){--写代码} 1.静态方法与非静态方法 a.静态方法的 ...

  7. 每日笔记-redis的理解及相关应用

    原文链接:常见面试题 本文大纲与之类似,在其基础上加入了自己在实际项目中对部分知识点的理解 Q1:谈谈对redis的理解 Q2:谈谈实际应用中怎么用redis的 2.1 缓存 2.2 分布式锁 2.3 ...

  8. 数据分析三剑客之一numpy

    NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵. 可以用python实现的科学计算包括: 1.一个强大的N维数组对象Array: 2.比较成熟的(广播)函数库: ...

  9. dev 控件的treelist

    最近项目中要求用dev 控件的treelist 树形控件. 如下图 要求如下: 1:选择父节点后,子节点全部打钩: 2:选择子节点而不选择父节点,则从当前节点的父节点一直到根节点check框都是半选状 ...

  10. Servlet第五篇（会话技术之Session）

    Session 什么是Session Session 是另一种记录浏览器状态的机制.不同的是Cookie保存在浏览器中,Session保存在服务器中.用户使用浏览器访问服务器的时候,服务器把用户的信息 ...