CSS|径向渐变
使用background-image: radial-gradient(渐变中心的形状(circle原型,ellipse椭圆),blue,red……)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
div{
width: 400px;
height: 200px;
}
/*background-image: radial-gradient(渐变中心的形状(circle原型,ellipse椭圆),blue,red……);*/
.div1{
background-image: radial-gradient(circle,blue,red);
}
.div2{
background-image: radial-gradient(ellipse,blue,red);
}
/*不均匀分布*/
.div3{
background-image: radial-gradient(ellipse,blue 5%,red 5%);
}
.div4{
background-image: radial-gradient(yellow,blue,red);
}
</style>
</head>
<body>
<div class="div1">
div1
</div>
<br>
<div class="div2">
div2
</div>
<br>
<div class="div3">
div3
</div>
<br>
<div class="div4">
div4
</div>
</body>
</html>
人生没有白走的路,每一步都算数!