<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
/* background-color: #bfa; */
/*
线性渐变
linear-gradient()
linear-gradient()
- 线性渐变的开头，我们可以指定一个渐变的方向
to left
to right
to bottom
to top
xxxdeg deg表示度数
- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
*/
/* background-image: linear-gradient(red 50px,yellow 100px,green 150px, orange 200px); */
background-image: repeating-linear-gradient(red 50px,yellow 100px);
width: 300px;
height: 300px;
/* border-radius: 150px; */
/*
径向渐变
radial-gradient()
默认情况下径向渐变的形状是根据元素的形状计算
正方形--->圆形
长方形--->椭圆形
也可以手动指定径向渐变的大小 radial-gradient(100px 100px,red,yellow)
circl->圆形
ellipse->椭圆
也可以指定渐变的位置 radial-gradient(100px 100px at 0 0,red,#bfa)
*/
background-image: radial-gradient(100px 100px at 0 0,red,#bfa)
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
