CSS3实现背景颜⾊渐变
CSS渐变⾊概念：
CSS渐变⾊(Gradients)能让我们⽤⼀种颜⾊渐变的效果修饰⼀个空间——从⼀种颜⾊过渡到另外⼀种颜⾊——填充这个空间。渐变⾊有两个形式：linear (线性渐变) 和radial (环形渐变)。很显然CSS渐变⾊(Gradients)技术是产⽣了⼀种视觉图案效果，⽽实现这种视觉效果很简单，能通过简单编程实现。CSS3⾥很早就引⼊了CSS渐变⾊(Gradients)，但这种技术的推⼴却经历了很长时间。
CSS渐变⾊(Gradients)技术基本的语法：
统⼀代码格式
background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)
第⼀个参数是渐变起始点或⾓。第⼆个参数是⼀种颜⾊停⽌点(color stops)。⾄少需要两种颜⾊(起点和终点)，你可以添加任意种颜⾊来增加颜⾊渐变的丰富程度。对颜⾊停⽌点的定义可以是⼀种颜⾊，或⼀种颜⾊加⼀个百分⽐：
/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)
下⾯的这段代码基本包括了⾃顶向下颜⾊渐变的所有情况：
{ /* 底⾊ */
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)技术⾥还⽀持带有⾓度的渐变⽅向，如45度⾓⽅向渐变：
/* 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-s top(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颜⾊渐变(Gradients)技术很有价值，但有时很难实现。有时你已经实现了想要的渐变，⽽浏览器的⽀持也会成为⼀个问题。下⾯是⼀些使⽤CSS颜⾊渐变(Gradients)的建议：
想让你的CSS颜⾊渐变(Gradients)表现⼀定的透明度？使⽤ rgba 颜⾊。
使⽤背景⾊垫底，这样防⽌当浏览器不⽀持时不注意没有任何颜⾊。
⽕狐浏览器和⾕歌浏览器都⽀持repeating-linear-gradient 和 repeating-radial-gradient，⽤法是：background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10p
x); background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
效果：
基本的颜⾊线性渐变，⾃上⽽下
基本的颜⾊线性渐变，45度⾓(Chrome, Safari, Firefox, IE10, Opera)

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