//由上至下变色

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. asp.net 微信开发(一)

    在准备工作中,我们已经完成准备工作,接下来就是进行开发啦,应该怎么来开发呢??容我想想...我觉得我们可以直接让用户的消息发送到微信的消息,转到我们自己的服务器上面!!感觉好厉害的样子 1.首先写 验 ...

  2. c# statusStrip控件(转)

    先了解一下StatusStrip:首选StatusStrip是Form中的一个控件,同时也是一个大的控件,其中含有许多子控件,这些子控件存放在控件群中. 这样我们要使用StatusStrip时, 首先 ...

  3. 远程git仓库的搭建

    具体的操作见另一篇 第一部分: 安装 1. 下载地址:  https://git-scm.com/download/win; 如果速度慢, 使用 迅雷下载; 2. 点击安装, 然后下一步, 直到下面这 ...

  4. spring三大核心

    IOC(控制反转) 下面是多个针对此理解的表达. 一个对象A依赖另一个对象B就要自己去new 这是高度耦合的 IOC容器的使用. 比如在B中使用A很多,哪一天A大量更改,那么B中就要修改好多代码. 通 ...

  5. 虚拟机安装及ubuntu-16.04.3-desktop-amd64.iso映像文件的安装

    虚拟机安装及ubuntu-16.04.3-desktop-amd64.iso映像文件 搞了大半天才搞清楚装linux的前提是要先安装虚拟机的 先下载虚拟机,在然后创建虚拟机,在虚拟机里面再安装linu ...

  6. ECharts折线图多个折线每次只显示一条

    echart 两条折线图如何默认只显示一条,另一条隐藏呢 只需要在legend后加上, selectedMode: 'single', selectedMode [ default: true ] 图 ...

  7. 项目(一)ftp搭建

    FTP服务 FTP两种模式: 主动模式服务器向客户端敲门,然后客户端开门 被动模式客户端向服务器敲门,然后服务器开门 传输模式:可以是文本模式,也可以是二进制模式,二进制模式更适合传输图片等非文本字符 ...

  8. Google开源软负载seesaw

    https://github.com/google/seesaw ------------------------ 在分布式系统中,负载均衡是非常重要的环节,通过负载均衡将请求派发到网络中的一个或多个 ...

  9. Oracle获取一周前,一个月前,一年前, 本周,本月,当年的日期

    1.获取当前时间一周前的日期 ' day from dual 类似的 --当前时间减去7分钟的时间 ' MINUTE from dual --当前时间减去7小时的时间 ' hour from dual ...

  10. python之字符串及其方法---整理集

    字符串方法 1.capitalize方法:字符串首字母大写 举例: test="alex" v=test.capitalize() print(v) 返回结果: Alex 2.ca ...