1. 线性渐变
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 40px;
}
.box1 {
background-image: linear-gradient(red, yellow, green);
}
.box2 {
background-image: linear-gradient(to right top, red, yellow, green);
}
.box3 {
background-image: linear-gradient(20deg, red, yellow, green);
}
.box4 {
background-image: linear-gradient(red 50px, yellow 100px, green 150px);
}
.box5 {
background-image: linear-gradient(20deg, red 50px, yellow 100px, green 150px);
font-size: 80px;
text-align: center;
line-height: 200px;
font-weight: bold;
color: transparent;
background-clip: text;
}
</style>
</head>
<body>
<div class="box box1">默认情况（从上到下）</div>
<div class="box box2">通过关键词调整线性渐变方向</div>
<div class="box box3">通过角度调整线性渐变方向</div>
<div class="box box4">调整线性渐变的区域</div>
<div class="box box5">带带大师兄</div>
</body>
</html>2. 径向渐变
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 40px;
}
.box1 {
background-image: radial-gradient(red, yellow, green);
}
.box2 {
background-image: radial-gradient(at right top, red, yellow, green);
}
.box3 {
background-image: radial-gradient(at 100px 50px, red, yellow, green);
}
.box4 {
background-image: radial-gradient(circle, red, yellow, green);
}
.box5 {
background-image: radial-gradient(100px 100px, red, yellow, green);
}
.box6 {
background-image: radial-gradient(red 50px, yellow 100px, green 200px);
}
.box7 {
background-image: radial-gradient(100px 50px at 150px 150px, red 50px, yellow 100px, green 200px);
}
</style>
</head>
<body>
<div class="box box1">默认情况</div>
<div class="box box2">通过关键词调整径向渐变圆的圆心</div>
<div class="box box3">通过像素值调整径向渐变圆的圆心</div>
<div class="box box4">通过关键字circle调整为正圆</div>
<div class="box box5">通过像素值调整为正圆</div>
<div class="box box6">调整径向渐变的区域</div>
<div class="box box7">综合写法</div>
</body>
</html>3. 重复渐变
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>重复渐变</title>
<style>
.box {
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: 50px;
font-size: 40px;
}
.box1 {
background-image: repeating-linear-gradient(red 50px, yellow 100px, green 150px);
}
.box2 {
background-image: repeating-radial-gradient(red 50px, yellow 100px, green 200px);
}
</style>
</head>
<body>
<div class="box box1">重复线性渐变</div>
<div class="box box2">重复径向渐变</div>
</body>
</html>
评论 (0)