---
title: 渐变
date: 2024-06-06T23:51:22Z
tags: []
---



## 线性渐变

1. 多个颜色之间的渐变,默认从上到下渐变  
   ​`background-img:linear-gradient(color1,color2,....)`​
2. 使用关键词设置渐变的方向  
   ​`background-img:linear-gradient(to top/right bottom/right,color1,color2,....)`​
3. 使用角度设置渐变的方向  
   ​`background-img:linear-gradient(x deg,color1,color2,....)`​
4. 调整渐变角开始的位置  
   ​`background-img:linear-gradient(color1 x px,color2 x px,....)`​

## 径向渐变

1. 多个颜色之间的渐变,默认从圆心四散(不一定是正圆,要看容器本身宽高比)  
   ​`background-img:radial-gradient(color1,color2,....)`​
2. 使用关键词调整渐变圆的圆心位置  
   ​`background-img:radial-gradient(at top/right bottom/right,color1,color2,....)`​
3. 使用像素调整渐变圆的圆心位置  
   ​`background-img:radial-gradient(at x px y px,color1,color2,....)`​
4. 调整渐变形状为正圆  
   ​`background-img:radial-gradient(circle,color1,color2,....)`​
5. 调整形状的半径  
   ​`background-img:radial-gradient(x px y px,color1,color2,....)`​
6. 调整渐变的位置  
   ​`background-img:radial-gradient(color1 x px,color2 x px,....)`​

## 重复渐变

在线性渐变或径向渐变前面加`repeating-`
