css背景渐变

CSS 背景渐变

类别

• 线性渐变 linear-gradient
• 径向渐变 radial-gradient
• 重复渐变 重复线性渐变：repeating-linear-gradient 重复径向渐变：repeating-radial-gradient

线性渐变

向下/向上/向左/向右/对角方向

background-image:linear-gradient(angle,color-point,...)

• angle：渐变的方向或角度

  to top : 从下向上填充渐变色
  to right : 从左向右填充渐变色
  to bottom : 从上向下填充渐变
  to left : 从右向左填充渐变色

  0deg : 0度->to top
  90deg : 90度->to right
  180deg : 180度->to bottom
  270deg : 270度->to left

• color-point：色标，表示颜色极其颜色出现的位置

  red 0% : 开始的时候是红色
  blue 25% : 25%的时候变成蓝色

例子：

background-image: linear-gradient(45deg,red 0%,blue 50%,yellow 100%);

径向渐变

由它们的中心定义

background-image: radial-gradient(size at position,color-point,...)

• size：圆的半径
• position：圆心位置，数值或关键字(可以是两个值，代表 x,y 轴坐标)

例子

.round{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: radial-gradient(100px at center,red 0%,blue 50%,yellow 100%);
}

还能做成不规则卡片

background-image: radial-gradient(circle at 200px -25px,transparent 50px,blue 50px);

重复渐变

background-image: repeating-linear-gradient(angle,color-point,...);
background-image: repeating-radial-gradient(size at position,color-point,...);

例子

background-image: repeating-linear-gradient(-45deg,#b0d8f9 30%,#0099FF 0,#b0d8f9 60%,#0099FF 0);