纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)


Posted in HTML / CSS onMay 07, 2014

下面我们来看看CSS渐变色(Gradients)技术基本的语法,浏览器支持情况和缺陷。

纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)

CSS渐变色(Gradients)术语和解释

CSS渐变色(Gradients)能让我们用一种颜色渐变的效果修饰一个空间——从一种颜色过渡到另外一种颜色——填充这个空间。渐变色有两个形式:linear (线性渐变) 和 radial (环形渐变)。很显然CSS渐变色(Gradients)技术是产生了一种视觉图案效果,而实现这种视觉效果很简单,能通过简单编程实现。CSS3里很早就引入了CSS渐变色(Gradients),但这种技术的推广却经历了很长时间。

CSS颜色线性渐变的语法

CSS颜色线性渐变的语法在各种浏览器里的实现稍微有些不同,但最后是统一标准的:

复制代码
代码如下:
background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比:
复制代码
代码如下:

/* color-stop(percentage/amount, color) */
color-stop(0.20, red)

因为CSS渐变色(Gradients)技术是CSS3里比较新的技术,属于高级的CSS功能,于是每种浏览器对这种技术的实现都添加了一些自己的特色。例如以WebKIt为渲染引擎的谷歌浏览器,就对它实现了多种语法。下面的这段代码基本包括了所有自顶向下颜色渐变的所有情况:
复制代码
代码如下:

#example1 {
/* 底色 */
background-color: #063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
/* ie10 */
background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
/* opera 11.1 */
background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
/* 标准写法 */
background-image: linear-gradient(#063053, #395873, #5c7c99);
}

注意,我们首先设定了一个背景色。这个颜色是在万一用户使用的浏览器不支持CSS渐变色(Gradients)技术时使用的颜色。CSS渐变色(Gradients)技术里还支持带有角度的渐变方向,而不仅仅只有直上直下或直左直右。我们可以用下面的语法实现它:
复制代码
代码如下:

#example2 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
/* ie10 */
background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
/* opera 11.1 */
background-image: -o-linear-gradient(45deg, #063053, #395873);
/* The "standard" */
background-image: linear-gradient(45deg, #063053, #395873);
}

我们可以做的更复杂些….一个色彩缤纷的CSS颜色渐变?下面我们来做一个彩虹:
复制代码
代码如下:

/* example 3 - linear rainbow */
#example3 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
/* ie10 */
background-image: -ms-linear-gradient(red, green, blue, purple, orange);
/* opera 11.1 */
background-image: -o-linear-gradient(red, green, blue, purple, orange);
/* The "standard" */
background-image: linear-gradient(red, green, blue, purple, orange);
}

关于IE对CSS颜色渐变技术的支持做一些说明:在早期IE是使用filter和-ms-filter语法实现渐变色,而最新版的IE里改为了-ms-linear-gradient语法。我们可以使用CSS里条件判断语句来解决这个问题:
复制代码
代码如下:

<!--[if lt IE 10]>
<style>
.gradientElement {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->

不是很理想,但这对设计一个网站很重要。

CSS环形颜色渐变(Radial Gradients)

CSS环形颜色渐变(Radial Gradients)跟线性渐变(linear gradients)不一样,它不是沿着一个方向渐变,而是以一个点为中心,向四周辐射渐变,360度的。目前除了IE外的所有浏览器都支持CSS环形颜色渐变(Radial Gradients),但它们也都有各自不同的语法…..我说的就是你,WebKit引擎的浏览器,WebKit曾经彻底修改了它的CSS环形颜色渐变(Radial Gradients)的语法。下面我们来看看老式的写法:

复制代码
代码如下:

/* basic */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* color stops */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

而现在WebKit(主要代表是谷歌浏览器)里的新语法跟火狐浏览器的完全一致了:
复制代码
代码如下:
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)

这种环形颜色渐变语法是最新的火狐和谷歌浏览器使用语法。还有一些常量可以使用在这种渐变技术中来设定渐变环形的大小:

closest-side: 对于原型,是指渐变图形扩散时需要到达的最近的一个边。对于椭圆,是指横向或纵向中要达到最近的一个边。
closest-corner: 是指渐变图形扩散时需要到达的最近的一个角
farthest-side: 跟 closest-side 相似,但到达到的是最远的一个边。
farthest-corner: 是指渐变图形扩散时需要到达的最远的一个角
contain: closest-side的同义词.
cover: farthest-corner的同义词
环形颜色渐变(Radial Gradients)的一个基本的用法是这样的:

复制代码
代码如下:

#example4 {
background-image: -moz-radial-gradient(orange, red);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
background-image: -webkit-radial-gradient(orange, red); /* new syntax */
background-image: radial-gradient(orange, red);
}

上面的例子没有设定位置和大小——只有两个颜色停止点。实际是可以使用无数颜色,就像下面我们制作的彩虹:
复制代码
代码如下:

#example5 {
background-image: -moz-radial-gradient(red,green,blue,purple,orange);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
background-image: radial-gradient(red, green, blue, purple, orange);
}

我们实现一个更复杂的,加上位置信息和更多的颜色停止点:
复制代码
代码如下:

#example6 {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}

注意上面使用的颜色写法和长度的单位。是事实上你可以使用任何颜色写法或长度单位。

CSS颜色渐变(Gradients)的技巧和提示

CSS颜色渐变(Gradients)技术很有价值,但有时很难实现。有时你已经实现了想要的渐变,而浏览器的支持也会成为一个问题。下面是一些使用CSS颜色渐变(Gradients)的建议:

想让你的CSS颜色渐变(Gradients)表现一定的透明度?使用 rgba 颜色。
使用背景色垫底,这样防止当浏览器不支持时不注意没有任何颜色。
火狐浏览器和谷歌浏览器都支持repeating-linear-gradient 和 repeating-radial-gradient,用法是:

复制代码
代码如下:
#example7 {
background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);
background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
}

如果你对渐变效果要求很严格,例如图表,动画,我推荐你使用Dojo的GFX程序包,它是创建矢量图的利器。而且对IE的支持也非常好!

CSS颜色渐变底色

老式浏览器,例如IE6,IE8或早期的火狐,并不支持渐变色技术,所以,你最好设置一个缺省的底色,当遇到不支持的浏览器时,background颜色就起到作用了:

复制代码
代码如下:

/* example 1 - basic */
#example1 {
/* fallback */
background-color:#063053;
/* gradients below */
}

对于不支持的浏览器的另外一种方法是先用新式浏览器实现这个效果,然后截图,然后使用CSS条件判断来调整输出方式。

CSS颜色渐变技术是CSS的一种发展进化的结果,随着现代浏览器技术的越来越成熟,我们能更自信的使用这种技术了。

HTML / CSS 相关文章推荐
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 #HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 #HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 #HTML / CSS
css3实现顶部社会化分享按钮示例
May 06 #HTML / CSS
css3圆角边框和边框阴影示例
May 05 #HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 #HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 #HTML / CSS
You might like
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php实现求相对时间函数
2015/06/15 PHP
curl和libcurl的区别简介
2015/07/01 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
Javascript的this用法
2017/01/16 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
js实现全选和全不选
2020/07/28 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
python实现报表自动化详解
2017/11/16 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
python多线程使用方法实例详解
2019/12/30 Python
Python列表推导式实现代码实例
2020/09/09 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
转党组织关系介绍信
2014/01/08 职场文书
优秀教师先进事迹
2014/01/22 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
导游词之任弼时故居
2020/01/07 职场文书