CSS的linear-gradient() 函数

实例

.box1 {
  background-image: linear-gradient(red, yellow);
}

.box2 {
  background-image: linear-gradient(0deg, red, yellow);
}

结果:

参数描述：

• 渐变方向（或者渐变角度角度）
  to left: 从右向左 相当于270度
  to right: 从左向右 相当于90度
  to top: 从下向上 相当于0度
  to bottom: 从上向下 相当于180度 （默认值）

tip: 角度是指顺时针角度

• 过度颜色
  color: 颜色设置
  length：终止位置 （具体长度）
  percentage： 终止位置 （百分比）

以下提供几个Demo实例
Demo1: 从左下角到右上角过渡

.box1 {
  background-image: linear-gradient(to top right, red, green, blue);
}

.box2 {
  background-image: linear-gradient(45deg, red, green, blue);
}

Demo2: 自定义终止位置

.box1 {
  /* 没有写方向 默认从上到下  截止到75%高度的时候绿色停止*/
  background-image: linear-gradient(red, green 75%, blue);
}

.box2 {
  /* 没有写方向 默认从上到下 绿色过渡到100px的时候截止 */
  background-image: linear-gradient(red, green 50px, blue);
}

Demo3: 彩条状图案

.box1 {
  background-image: linear-gradient(to right top, red, red 33.3%, green 33.3%, green 66.6%, blue 66.6%, blue);
}

.box2 {
  background-image: linear-gradient(90deg, red, red 33.3%, green 33.3%, green 66.6%, blue 66.6%, blue);
}