CSS3-设置渐变颜⾊背景，线性放射性循环
渐变就是多种颜⾊混合⽽成的效果，css3要实现渐变，就必须使⽤渐变函数来设置background或则background-imge属性。同时为了兼容各个浏览器（IE，safari，chrome，Firefox），还需要添加对应的带开发商前缀的渐变
1，线性渐变
a，使⽤linear-gradient（）函数可以创建渐变
<style>
#div1 {
width：200px；
height： 200px；
background: linear-gradient(top, white, blue);
background: -ms-linear-gradient(top, white, blue);
background: -webkit-linear-gradient(top, white, blue);
background: -moz-linear-gradient(top, white, blue);
}
#div2 {
width：200px；
height： 200px；
background: linear-gradient(top left, white, blue);/*渐变从左上⾓到右下⾓*/
background: -ms-linear-gradient(top left, white, blue);
background: -webkit-linear-gradient(top left, white, blue);
background: -moz-linear-gradient(top left, white, blue);
}
</style>
<div id="div1"></div>
<div id="div2"></div>
b，设置多个颜⾊渐变
#div1 {
width: 200px;
height: 200px;
background: linear-gradient(left, red, yellow, lime, aqua, blue);
background: -ms-linear-gradient(left, red, yellow, lime, aqua, blue);
background: -webkit-linear-gradient(left, red, yellow, lime, aqua, blue);
background: -moz-linear-gradient(left, red, yellow, lime, aqua, blue);
}
c，使⽤渐变点（gradient stop）控制每个颜⾊的起点
每个渐变点⽤百分⽐值表⽰，0%是整个渐变的起点，100%是整个渐变的终点。下⾯样例把橙⾊和黄⾊的范围扩展到了中间：#div1 {
background: linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);
background: -ms-linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);
background: -webkit-linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);
background: -moz-linear-gradient(left, red 0%, orange 10%, yellow 90%, violet 100%);
}
2，放射性渐变
（1）使⽤radial-gradient()函数创建放射性渐变
第⼀个参数 circle 表⽰圆形渐变。下⾯这个放射性渐变其圆⼼是⽩⾊，然后逐渐过渡到圆周的淡蓝⾊：
#div1 {
background: radial-gradient(circle, white, lightblue);
background: -ms-radial-gradient(circle, white, lightblue);
background: -webkit-linear-gradient(circle, white, lightblue);
background: -moz-linear-gradient(circle, white, lightblue);
}
如果使⽤ ellipse 表⽰把渐变拉伸成椭圆形：
#div1 {
background: radial-gradient(ellipse, white, lightblue);
background: -ms-radial-gradient(ellipse, white, lightblue);
background: -webkit-radial-gradient(ellipse, white, lightblue);
background: -moz-radial-gradient(ellipse, white, lightblue);
}
渐变颜代码大全（2）设置渐变的中⼼位置
下⾯使⽤ at 关键字告诉浏览器开始的位置离左边缘70%，离上边缘30%
#div1 {
background: radial-gradient(circle at 70% 30%, white, lightblue);
background: -ms-radial-gradient(circle at 70% 30%, white, lightblue);
background: -webkit-radial-gradient(circle at 70% 30%, white, lightblue);
background: -moz-radial-gradient(circle at 70% 30%, white, lightblue);
}
同线性渐变⼀样我们可以设置多个渐变颜⾊，也可以控制渐变颜⾊的起点
3，循环渐变
linear-gradient() 和 radial-gradient() 只能将设置的颜⾊渐变⼀次。
⽽ repeating-linear-gradient() 和 repeating-radial-gradient() 会以相同的颜⾊顺序进⾏不断地循环，直到颜⾊条纹填满元素。
循环渐变函数语法基本上与普通渐变⼀样。唯⼀不同的是，我们需要确保限制了渐变的⼤⼩（即最后⼀个颜⾊包含⼀个百分⽐或像素值），以便其可以循环。
（1）使⽤百分⽐限制渐变⼤⼩
下⾯样例中⼼颜⾊是⽩⾊，设置渐变淡蓝⾊在10%的位置就结束。然后渐变循环，⼜以⽩⾊开始。
#div1 {
background: repeating-radial-gradient(circle, white, lightblue 10%);
background: -ms-repeating-radial-gradient(circle, white, lightblue 10%);
background: -webkit-repeating-radial-gradient(circle, white, lightblue 10%);
background: -moz-repeating-radial-gradient(circle, white, lightblue 10%);
}
（2）使⽤固定像素值限制渐变⼤⼩
下⾯样例不管容器⼤⼩如何变化，每个条纹都有固定⼀样的宽度（30px）
#div1 {
background: repeating-linear-gradient(left, white, lightblue 30px);
background: -ms-repeating-linear-gradient(left, white, lightblue 30px);
background: -webkit-repeating-linear-gradient(left, white, lightblue 30px);
background: -moz-repeating-linear-gradient(left, white, lightblue 30px);
}
4，对不⽀持的浏览器设置后备⽅案
上⾯的样例，渐变都是通过 background 属性实现的。实际上，对 background-image 属性使⽤同样的渐变函数也可以达到相同的⽬的。
它们的区别是，使⽤ background 属性可以使⽤纯⾊作为后备：
#div1 {
background: lightblue;
background: radial-gradient(circle, white, lightblue);
background: -ms-radial-gradient(circle, white, lightblue);
background: -webkit-linear-gradient(circle, white, lightblue);
background: -moz-linear-gradient(circle, white, lightblue);
}
使⽤ background-image 属性，可以创建背景图⽚作为后备。
（当然对于⽀持渐变的浏览器也是很聪明的，它不会下载后备图⽚。）
#div1 {
background-image: url(bg.jpg);
background-image: radial-gradient(circle, white, lightblue);
background-image: -ms-radial-gradient(circle, white, lightblue);
background-image: -webkit-linear-gradient(circle, white, lightblue);
background-image: -moz-linear-gradient(circle, white, lightblue);
}
5，在线渐变⽣成⼯具
访问地址：
我们只需在⽹页中选择颜⾊，调节控制器直到渐变达到满意的效果即可。然后⼯具会⽣成所需要的代码（包括不同开发商前缀的所有代码）
我们可以获得我们想要的渐变⾊

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