Skip to content

渐变

线性渐变

background: linear-gradient(angle,color1,color2,...);

// 45度线性渐变
background: linear-gradient(45deg,red,yellow,blue);

// 90度线性渐变
background: linear-gradient(90deg,red,yellow,blue);

径向渐变

background: radial-gradient(shape,color1,color2,...);

// 圆形径向渐变
background: radial-gradient(ellipse at center,red,blue);

重复渐变

background: repeating-linear-gradient(angle,color1,color2,...);

// 重复线性渐变
background: repeating-linear-gradient(90deg,red,yellow 10%,blue 15%);

// 重复径向渐变
background: repeating-radial-gradient(circle at center,red 10%,blue 40%);