css3彩带扩散效果_纯CSS实现颜⾊渐变效果（包含环形渐
变、线性渐变、彩虹效果等）...
下⾯我们来看看CSS渐变⾊(Gradients)技术基本的语法，浏览器⽀持情况和缺陷。
CSS渐变⾊(Gradients)术语和解释
CSS渐变⾊(Gradients)能让我们⽤⼀种颜⾊渐变的效果修饰⼀个空间——从⼀种颜⾊过渡到另外⼀种颜⾊——填充这个空间。渐变⾊有两个形式：linear (线性渐变) 和 radial (环形渐变)。很显然CSS渐变⾊(Gradients)技术是产⽣了⼀种视觉图案效果，⽽实现这种视觉效果很简单，能通过简单编程实现。CSS3⾥很早就引⼊了CSS渐变⾊(Gradients)，但这种技术的推⼴却经历了很长时间。
CSS颜⾊线性渐变的语法
CSS颜⾊线性渐变的语法在各种浏览器⾥的实现稍微有些不同，但最后是统⼀标准的：
渐变颜代码大全
复制代码代码如下:
background-image: linear-gradient( || ,]? , [, ]*)
第⼀个参数是渐变起始点或⾓。第⼆个参数是⼀种颜⾊停⽌点(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:adient(startColorstr='#063053', endColorstr='#395873');
/* ie8 + */
-ms-filter: "progid:adient(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⾥条件判断语句来解决这个问题：
复制代码代码如下:
不是很理想，但这对设计⼀个⽹站很重要。
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( [ || ,]? [ || ,]? , [, ]*)
这种环形颜⾊渐变语法是最新的⽕狐和⾕歌浏览器使⽤语法。还有⼀些常量可以使⽤在这种渐变技术中来设定渐变环形的⼤⼩：
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的⼀种发展进化的结果，随着现代浏览器技术的越来越成熟，我们能更⾃信的使⽤这种技术了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。