欢迎来到 jackNEss'窝窝
I like simple mind

CSS3 线性渐变介绍

2011年08月31日

gradient

在 css3出现之前,给一个容器做一个渐变效果的一般做法是 切一张背景图做循环,然而,CSS3的到来,我们可以通过 CSS 来实现,告别图片。
以下就说说不同浏览器实现渐变的方法:

Webkit

Webkit是第一个支持渐变的浏览器内核(包括 chrome 和 safari ,还有各种webkit内核的浏览器),它使用下面的结构:

语法:

background-image:-webkit-gradient(type,x1 y1,x2 y2,from(开始颜色值),to(结束颜色值),[color-stop(偏移量小数,停靠颜色值),...]);

变量解释:

  1. -webkit-gradient: 是background的一个属性值;
  2. type: webkit内核的Linear Gradients (线性渐变) 第一组参数type(类型)为 linear;
  3. x1 y1,x2 y2: 为线性渐变的开始点坐标和结束点坐标。x1,x2,y1,y2 的取值范围为 0% – 100%,当x1,x2,y1,y2取值为极值的时候,x1,x2 可以取值 left (0%) 或者 right (100%);同理y1,y2可以取值top (0%) 或者 bottom (100%);

    • 当 x1 == x2, y1 != y2,实现垂直渐变,调整 y1,y2的值可以调整渐变半径大小;
    • 当 y1 == y2, x1 != x2,实现水平渐变,调整 x1,x2的值可以调整渐变半径大小;
    • 当 y1 != y2, x1 != x2,实现角度渐变,当x1,x2,y1,y2取值为极值的时候接近垂直渐变或水平渐变;
    • 当 y1 == y2, x1 == x2,实现无渐变,取from的色值,即 “from(颜色值)”
    • 实现垂直渐变和水平渐变渐变时,x1和x2可以最简单的取值是left(0%)或right(100%),y1和y2可以最简单的取值是top(0%)或bottom(100%);
  4. from(开始颜色值):渐变开始颜色值;
  5. to(结束颜色值):渐变结束颜色值;
  6. [color-stop(偏移量<小数>,停靠颜色值),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移量必须为小数,如果偏移量>=1,那么该color-stop相当于无效;


例子参考:

background:-webkit-gradient(linear,0 0,0 100%,from(#b3d465),to(#fff100));

firefox

firefox从3.6版本开始支持渐变,采用了私有属性来实现线性渐变,而且语法与 webkit 的不一样。

语法:

background-image:-moz-linear-gradient([<point> | | <angle>,] , 开始颜色值,结束颜色值, [(停靠颜色值,偏移量百分数),...] );

变量解释:

  1. -moz-linear-gradient:是background的一个属性值;
  2. [<point> | | <angle>,] :为第一组参数,他的基本组成点位 <point >(渐变出发点) 和角度;

    • <point> 渐变的出发点:他可以被指定为一个百分比,像素,或使用 “left”,”center” 或者 “right” 的水平定位 和 “top”,”center” 或者 “buttom” 的垂直定位。
    • 如果只在水平渐变的话,只要设置:”left center”或”right center”,如果垂直渐变的话设置”center top”或者”center buttom”。Firefox下可以省略掉 “center”,也就是如果只在水平渐变的话,只要设置:”left”或”right”,如果垂直渐变的话设置”top”或者”buttom”。
    • 如果这两个值是百分比的值的话,那么第一个是水平渐变位置,第二个是垂直渐变位置,这个时候还需要一个角度值,比如 “90deg”;
    • 也可以单单只有一个 角度值,不定义渐变的出发点;
  3. (开始颜色值),(结束颜色值)是两个渐变颜色值;
  4. [(停靠颜色值,偏移量百分数),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移 量必须为0%~100%;

例子参考:

background: -moz-linear-gradient(top, #b3d465, #b3d465);

IE

IE到这篇文章为止(IE9)还没有支持 css3的渐变,不过IE可以用自带的渐变滤镜来实现渐变效果。

语法:

filter:  progid:DXImageTransform.Microsoft.gradient(enabled=true,GradientType:0,startColorstr='#ffffff', endColorstr='#ff0000'); 

变量解释:

  1. enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true | false

    • true: 默认值。滤镜激活。
    • false:滤镜被禁止。
  2. startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。

    其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。

  3. EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。默认值为 #FF000000 。不透明黑色。

  4. GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0

    • 1:默认值。水平渐变。
    • 0:垂直渐变。

其他变量解释:

  1. StartColor: 可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 – 4294967295 。 0 为透明。 4294967295 为不透明白色。

  2. EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 – 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时,也可以用十六进制格式: 0xAARRGGBB 。

(要注意的是,在IE9下,如果你想运用这个滤镜 再加上 border-radius 圆角的话,估计你会失望,因为…容器本身是对border-radius生效,但是呢,这个filter做出来的渐变就好像活生生地贴在容器上方似的,只支持矩形,无视 border-radius)

Opera

很遗憾地告诉你,opera目前还不支持 css3渐变 截止本文章为止,最新版本是 opera11.50;
Opera 需要添加 -o-前缀进行定义:

background:-o-linear-gradient(top,#b3d465,#fff100);

下面贴出完整兼容各浏览器的代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 渐变</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
.linerArea{ 
	width:500px; 
	height:300px;
	margin:50px auto;
	border:1px solid #e1e1e1;
	background:#fff;
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#b3d465), to(#fff100));
	background:-moz-linear-gradient(0 0 0deg,#b3d465,#fff100);
	background:-o-linear-gradient(top,#b3d465,#fff100);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#b3d465",endColorstr="#fff100");
}
-->
</style>
</head>
<body>
<div  class="linerArea"></div>
</body>
</html>

使用CSS渐变需要注意的地方:

  • 尽可能的使用它。如果让IE用户看到一个固定的纯色,我鼓励你使用这种方法;
  • IE6/7/8/9, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 渐变,Firefox、Opera 和Safari用户通常经常升级浏览器,而Chrome的自动升级机制会在后台自动升级,所以这并不是个大问题;
  • 总是为不支持这些浏览器私有属性的浏览器应用一个默认的,纯色背景;
  • 页面无须在每个浏览器里面看起来完全一样!
  • Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标。

(ps:其实说真的,css3的这个渐变目前主要是应用在手机前端领域,web领域的话有部分情况下最好的方法还是用背景,用背景的好处就是,你可以让一个不懂代码的一个人来修改那个渐变颜色而不需要你亲自动手,这种情况一般在于做 网站皮肤的时候(特别是数量多的时候),可以让设计师直接更改图片而不需要通过你再来弄)

分类HTML + CSS
阅读 2,502
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS