[CSS] ch03-10. grad

10_grad.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>그러데이션</title>
<link href="layout1.css" rel="stylesheet" type="text/css">
<style>
    @import "../css/10_grad.css";
</style>
</head>
<body>
    <div class="grad1"></div>
    <div class="grad2"></div>
    <div class="grad3"></div>
</body>
</html>

 

 

10_grad.css

@CHARSET "UTF-8";
div {
    width: 500px;
    height: 300px;
    border: 1px solid black;
    border-radius: 10px;
}
.grad1{
    background: linear-gradient(135deg, blue, white);
}
.grad2{
    background: linear-gradient(to bottom, blue, white);
}
.grad3{
    background: linear-gradient(to bottom, blue, white 30%, blue);
}