背景从上到下颜⾊渐变_css线性渐变与径向渐变
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对⾓⽅向
- 径向渐变（Radial Gradients）- 由它们的中⼼定义
线性渐变 - 从上到下（默认情况下）
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
---------------------
线性渐变 - 从左到右
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
-
--------------------
线性渐变 - 对⾓
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
---------------------
线性渐变 - 使⽤⾓度(浏览器⾓度标准可能不同)
#grad {
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
夏俊艾background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}
---------------------
线性渐变 - 使⽤多个颜⾊结点
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
鼻子疼怎么回事background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
---------------------
线性渐变 - 使⽤透明度
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */ background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/ background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/ backgro
und: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
---------------------
线性渐变 - 重复的线性渐变
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
终字开头的成语
/
* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
---------------------
CSS3 径向渐变
径向渐变由它的中⼼定义。
为了创建⼀个径向渐变，你也必须⾄少定义两种颜⾊结点。颜⾊结点即你想要呈现平稳过渡的颜⾊。同时，你也可以指定渐变的中⼼、形状（圆形或椭圆形）、⼤⼩。默认情况下，渐变的中⼼是 center（表⽰在中⼼点），渐变的形状是 ellip（表⽰椭圆形），渐变的⼤⼩是farthest-corner（表⽰到最远的⾓落）。
语法
background: radial-gradient(center, shape size, start-color, ..., last-color);
径向渐变 - 颜⾊结点均匀分布（默认情况下）
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
---------------------
径向渐变 - 颜⾊结点不均匀分布
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
---------------------
设置形状
shape 参数定义了形状。它可以是值 circle 或 ellip。其中，circle 表⽰圆形，ellip 表⽰椭圆形。默认值是 ellip。
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
设置自动关机background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
食品用香精
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
---------------------
不同尺⼨⼤⼩关键字的使⽤
数独方法
size 参数定义了渐变的⼤⼩。它可以是以下四个值：
clost-side, farthest-side, clost-corner, farthest-corner
.grad1 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, clost-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, clost-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, clost-side,blue,green,yellow,black); /* Firefox
3.6 - 15 */ background: radial-gradient(60% 55%, clost-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
}
.grad2 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ }
.grad3 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, clost-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, clost-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, clost-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, clost-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ }
.grad4 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法
（必须放在最后） */ }
---------------------
重复的径向渐变
#grad {
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */尽职调查报告模板
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
牛鼻绳---------------------
完整参数：
background-image: radial-gradient(circle,#ffba00 25%,#ffefa4 50%);
