一、渐变
通过渐变可以设置一个复杂的背景颜色，可以实现从一个颜色向其它颜色过渡的效果。渐变式图片，需要通过 background-image 设置。
二、线性渐变
<!DOCTYPE html>
<html>
<head>
<title>渐变</title>
<meta charset="UTF-8">
<style>
.box1{
width: 500px;
height: 500px;
/*
linear-gradient() 线性渐变，颜色沿着一条直线发生变化
- linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
- 线性渐变的开头，我们可以指定一个渐变的方向
- to left
- to right
- to bottom
- to top
- deg deg表示度数
- turn turn表示圈
- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况
*/
/*background-image: linear-gradient(red,yellow);*/
/*background-image: linear-gradient(to right,red,yellow);*/
/*background-image: linear-gradient(to right bottom,red,yellow);*/
/*background-image: linear-gradient(45deg,red,yellow);*/
/*background-image: linear-gradient(.25turn,red,yellow);*/
/* 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况 */
/*background-image: linear-gradient(red 0px,orange 300px,yellow 500px);*/
/* repeating-linear-gradient() 可以平铺的线性渐变 */
background-image: repeating-linear-gradient(red,yellow 100px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
三、径向渐变
<!DOCTYPE html>
<html>
<head>
<title>渐变</title>
<meta charset="UTF-8">
<style>
.box1{
width: 500px;
height: 500px;
/*
radial-gradient() 径向渐变（放射性的效果）
- 语法：radial-gradient(大小 at 位置, 颜色 位置, 颜色 位置, 颜色 位置)
- 大小：
- circle 圆形
- elipse 椭圆
- closest-side 近边
- closest-corner 近角
- farthest-side 远边
- farthest-corner 远角
- 像素值
- 位置
- top right left center bottom 像素值
- 默认情况下，径向渐变圆心的形状根据元素的形状来计算的
- 正方形 --> 圆形
- 矩形 --> 椭圆形
*/
/*background-image: radial-gradient(red,yellow);*/
/*background-image: radial-gradient(300px 300px,red,yellow);*/
/* 指定渐变的位置 */
background-image: radial-gradient(300px 300px at 0 0,red,yellow);
/*background-image: radial-gradient(300px 300px,red,yellow);*/
/*background-image: repeating-radial-gradient(200px 200px,red,yellow);*/
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>