//由上至下变色

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. HTML一片空白, 无法渲染: Empty tag doesn't work in some browsers

    html 文件直接引入一个script, 如下 <html> <head> <script type="application/javascript" ...

  2. Oracle数据库row_number详解<转>

    语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的ROW ...

  3. Oracle修改系统参数导致系统无法启动对pfile文件恢复。

    1.当前现象:Oracle启动报错ORA-27102 [oracle@JYDB1 ~]$ sqlplus / as sysdba SQL*Plus: Release 10.2.0.4.0 - Prod ...

  4. 201772020113 李清华《面向对象程序设计(java)》第17周学习总结

    1.实验目的与要求 (1) 掌握线程同步的概念及实现技术: (2) 线程综合编程练习 2.实验内容和步骤 实验1:测试程序并进行代码注释. 测试程序1: l  在Elipse环境下调试教材651页程序 ...

  5. 如何创建数据库以及MySQL增删改查命令的简单运用

    在已经安装好MySQL的前提下 1.在Windows打开命令提示符窗口,输入命令启动MySQL命令行工具并登入root用户:mysql -h localhost -u root -p 2.输入密码后, ...

  6. [Android]Linux下WebRTC下载与编译

    1.硬盘空间: WebRTC官方原话: The checkout size is large due the use of the Chromium build toolchain and many ...

  7. drf框架之跨域问题的解决与缓存问题

    什么是跨域问题呢: 1. 跨域问题: CORS 跨域资源共享: 有简单请求 和非简单请求 简单请求: 只要符合如下两条,就是简单请求,否则则是非简单请求 (1) 请求方法是以下三种方法之一: HEAD ...

  8. laravel框架memcached的使用

    在laravel配置及使用使用 Memcached 缓存要求安装了Memcached PECL 包,即 PHP Memcached 扩展.你可以在配置文件 config/cache.php 中列出所有 ...

  9. 正则简单操作cookie、url search

    正则操作cookie.url getCookie function getCookie(key) { var cookies = window.document.cookie, reg = new R ...

  10. 前端面试之Javascript

    1,JS基本的数据类型和引用类型: (1)基本数据类型:number,string,null,undefined,symbol--栈: (2)引用数据类型:object,array,function- ...