<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그라데이션</title>
<style>
/*
- background에 linear-gradient()함수를 이용하여 선형 그라데이션 효과를 줄 수 있음*/
.box{ height: 80px; border: 1px solid black;}
.box1{ background: linear-gradient(tomato,yellow);}
.box2{ background: linear-gradient(to right, tomato,yellow);}
.box3{ background: linear-gradient(to top, tomato,yellow);}
.box4{ background: linear-gradient(to left, tomato,yellow);}
.box5{ background: linear-gradient(to bottom right, tomato,yellow);} /*대각선*/
.box6{ background: linear-gradient(45deg, tomato,yellow);} /*45도각도*/
.box7{ background: linear-gradient(tomato, purple, darkblue, skyblue);}
.box8{ background: linear-gradient(tomato 10px, purple 20px, darkblue 80%, skyblue);}
.box9{ background: linear-gradient(to bottom left, tomato 50%, skyblue 50%);}
.box10{ background: linear-gradient(to left, red, yellow 30%, green 60%);}
.box11{ background: linear-gradient(to left, red 30%, yellow 30% 60%, green 60%);}
.box12{ /*radial 원형 그라데이션*/
background : radial-gradient(transparent, rgb(235, 157, 198)),
url("../image/bus.jpg") no-repeat center center;
height: 3000px;
}
</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>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
<div class="box box10"></div>
<div class="box box11"></div>
<div class="box box12"></div>
</body>
</html>