CSS3 渐变效果

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

-webkit-gradient是webkit引擎对渐变的实现参数,一共有五个。

第一个参数表示渐变类型(type),可以是linear(线性渐变)或者radial(径向渐变)。

第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。

第四个和第五个参数,分别是两个color-stop函数。color-stop函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。

IE依靠滤镜实现渐变。startColorstr表示起点的颜色,endColorstr表示终点颜色。GradientType表示渐变类型,0为缺省值,表示垂直渐变,1表示水平渐变。

线性渐变使用from()以及to()方法指定过渡颜色点:

background: -webkit-gradient(linear, left top, left bottom, from(#96ff00), color-stop(0.5, orange), to(rgb(255, 0, 0)));

线性渐变多个过渡点在同一位置:

background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

径向渐变综合效果演示:

background: -moz-radial-gradient(30px 30px, circle farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 30%),
-moz-radial-gradient(50px 70px, circle farthest-corner, #F30 0%, rgba(255, 159, 34, 0) 60%),
-moz-radial-gradient(80px 10px, circle farthest-corner, #03F 0%, rgba(222, 255, 0, 0) 80%);
background:-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),
-webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),
-webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));

circle farthest-corner圆形渐变,ellipse farthest-corner椭圆渐变

---恢复内容结束---

CSS3 渐变效果的更多相关文章

  1. CSS3渐变效果工具

    推荐一个css3渐变效果工具,觉得有帮助的可以收藏下. 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡.CSS3 定义了两种类型的渐变(gradient ...

  2. 第 22 章 CSS3 渐变效果

    学习要点: 1.线性渐变 2.径向渐变 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 背景渐变功能,主要有两种渐变方式:线性渐变和径向(放射性)渐变. 一.线性渐变 CSS3 提供了 li ...

  3. 渐变背景 css3渐变效果及代码

    渐变背景及代码  http://uigradients.com/#Behongo

  4. transition css3 渐变效果

    div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transiti ...

  5. CSS3渐变效果

    一.线性渐变linear-gradient  1.使用方法: background:-webkit-linear-gradient(red,blue);background:-moz-linear-g ...

  6. 利用css3渐变效果实现圆环旋转效果

    * { margin: 0; padding: 0; } .stage { width: 200px; height: 130px; margin: 100px auto; position: rel ...

  7. Web开发者选择的最佳HTML5/CSS3代码生成器

    原文地址:http://codecloud.net/css3-code-generators-for-web-programmers-6672.htmlHTML5 和CSS3是一入门就能用的最好的语言 ...

  8. Css3 - 全面学习

    css3实验.生成.学习网站 http://www.css3maker.com/ http://www.css3.me/ 查询前缀和兼容性 http://caniuse.com/ 1.文本阴影 < ...

  9. CSS3笔记

    CSS/CSS3在线手册:http://www.css119.com/book/css/   CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1. ...

随机推荐

  1. DNS Bind服务配置解析

    DNS域名解析服务(Domain Name System)是用于解析域名与IP地址对应关系的服务,功能上可以实现正向解析与反向解析: 一.DNS服务器工作模式分类: 1.主服务器:在特定区域内具有唯一 ...

  2. Python中print格式化输出

    截取字符串输出,下面例子将只输出字符串的前3个字母 >>> str="abcdefg" >>> print "%.3s" % ...

  3. ios模拟器已安装但xcode无法显示

    最近把系统抹盘重装了, 然后用Time Machine恢复到原始状态, 一切安好, 但是使用xcode的时候发现一个模拟器都没有了: 各种折腾, 重装SDK啊, 重装xcode啊,最后发现, 如果你的 ...

  4. 解决win8.1电脑无法安装手机驱动问题

    相信安装过win8.1的朋友都会有个问题,那就是自己的安卓手机怎么都连不上电脑,比如360助手.豌豆荚.91助手,都安不上驱动.下面几个简单步骤即可轻松解决. 1.首先声明,官方的驱动是完全支持win ...

  5. Windows下使用最新的JDK1.7.0_51以上版本连接Jenkins出现SecurityException

    我在slave节点上安装了jdk1.8, 当在节点上启动slave-agent的时候,报安全性限制的错误: java.lang.SecurityException: Missing required ...

  6. 修改linux终端DIR显示颜色

    头疼死,linux终端下,目录颜色蓝色在黑色的背景下,睁大双眼都看不清楚. 找办法修改,找到默认的颜色设置目录: # vi /etc/DIR_COLORS 查看文件,并查找DIR: 可以看到默认设定“ ...

  7. Linux中什么是块设备 及 lsblk命令的使用

    Linux中I/O设备分为两类:字符设备和块设备.两种设备本身没有严格限制,但是,基于不同的功能进行了分类.(1)字符设备:提供连续的数据流,应用程序可以顺序读取,通常不支持随机存取.相反,此类设备支 ...

  8. ios 查看模拟器路径以及应用的文件夹

    模拟器文件查看 好,这个时候选择往模拟器上面调试程序: 运行模拟器: 打开Finder,按住option,在菜单栏中选择“前往”->“资源库” 如果没发现资源库,则使用终端 命令行输入  ope ...

  9. IIS------如何占用80端口

    如何占用80端口 请看我的一篇随笔: https://www.cnblogs.com/tianhengblogs/p/9292347.html

  10. Java获取一维数组的最小值

    编写程序,实现接受用户在文本框中输入的单行数据.这些数据都是整数数字,以空格进行分隔,空格数量不限.并将这些数据分割成一维数组,再从数组中提取最小值显示在界面中.思路是先对用户的输入进行验证,即先用t ...