728x90
반응형
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);
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-02. margin (0) | 2017.08.23 |
|---|---|
| [CSS] ch04-01. width (0) | 2017.08.23 |
| [CSS] ch03-09. bgorigin (0) | 2017.08.23 |
| [CSS] ch03-08. bgsize (0) | 2017.08.23 |
| [CSS] ch03-07. bgclip (0) | 2017.08.23 |