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);