18、CSS渐变gradient
2022-06-05 本文已影响0人
小黄不头秃
一、CSS渐变
(1)线性渐变：linear-gradient（color1，color2，…）
linear-gradient（color1，color2，…）
开头可以指定渐变方向：to left/right/top/bottom,deg(度数),turn(圈)
repeat-linear-gradient（）可以平铺的 线性渐变
(2)径向渐变:radial-gradient()（放射性效果）
默认情况下径向渐变的形状根据形状来计算
正方形 >> 圆形
长方形 >> 椭圆
circle、eclipse
二、代码编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
/*
线性渐变：
渐变是图片，
linear-gradient（color1，color2，…）
开头可以指定渐变方向：to left/right/top/bottom,deg(度数),turn(圈)
repeat-linear-gradient（）可以平铺的 线性渐变
*/
.box1{
width: 300px;
height: 48px;
background-image: linear-gradient(to right,skyblue,purple);
}
/*
径向渐变：radial-gradient()（放射性效果）
默认情况下径向渐变的形状根据形状来计算
正方形 》》圆形
长方形》》椭圆
circle、eclipse
*/
.box2{
width: 200px;
height: 200px;
background-image:radial-gradient(100px 50px,yellow,red);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
