渐变
线形渐变（Linear Gradients） 向下/向上/向左/向右/对角方向
角度如上图
.box1 {
• width: 500px;
• height: 500px;
• border: 2px solid;
• /* 通过方位值确定渐变方向 left right top bottom */
• /* 颜色至少两个 */
• background-image: linear-gradient(to right,#6c9ed8,#3b4db6);
• background-image: linear-gradient(to right top,#790f69,#b76cda,#3b4db6,);
/* 通过角度定义方向 单位 deg */
• /* 从左往右 */
background-image:linear-gradient(90deg,#790f69,#b76cda,#3b4db6);
/* 从上到下 */
background-image: linear-gradient(180deg,#790f69,#b76cda,#3b4db6);
background-image: linear-gradient(-120deg,#790f69,#b76cda,#3b4db6);
}
.box2{
width: 500px;
height: 100px;
border: 2px solid;
/*麻烦的写法和重复效果一样 */
background-image: linear-gradient(to right,blue 0px , blue 30px, transparent 30px,transparent 60px,blue 60px, blue 90px, transparent 90px,transparent 120px,blue 120px, blue 150px);
/*颜色各自占一半，颜色数值占宽度的一半 */
background-image: linear-gradient(to right ,blue 0, blue 250px,green 0,green 250px);
/* 重复效果 */
background-image: repeating-linear-gradient(-120deg,blue 0, blue 50px,transparent 50px,transparent 100px);
background-image: repeating-linear-gradient(90deg,blue 0,blue 50px,white 50px, white 100px);
径向渐变（Radial Gradients）- 使用关键字定义渐变形状，circle表示圆形，ellipse 表示椭圆
.box3 {
width: 800px;
height: 500px;
border: 2px solid;
/* 默认从中心开始渐变 */
background-image: radial-gradient(circle, #270322, #c99ddd);
/* 椭圆 */
background-image: radial-gradient(ellipse, #270322, #c99ddd);
/* 定义开始渐变的位置 */
background-image: radial-gradient(circle at 50% 80%, #270322, #c99ddd);
/* 定义开始渐变的形状大小 */
background-image: radial-gradient(circle 100px at 30% 50%, #270322, #c99ddd);
/* 定义开始颜色的形状大小 */
background-image: radial-gradient(circle 100px at 30% 50%, #270322 100px, #c99ddd 100px);
}
\
