![[2021/12/29]국비지원 CSS3 9-(1) gradient](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCKmVR%2Fbtrsc1q29bk%2F6yRwqQcTM0KcUacIU68xdK%2Fimg.png)
gradient : 그라디언트
gradient property
- linear-gradient : 선형 그라디언트
- background-image : linear-gradient ()
- setting ( direction = deg )
- linear-gradient ( to direction, start color, end color )
- linear-gradient ( deg, start color, end color )
- linear-gradient ( to direction, first color n%, nth color n%, last color n% )
- direction : start ( direction ) or end ( to direction )
- top
- left
- bottom
- right
- top left ( 45deg )
- top right ( 135deg )
- bottom left ( 135deg )
- bottom right ( 45deg )
- setting ( direction = deg )
- background-image : linear-gradient ()
- radial-gradient : 방사형 gradient
- radial-gradient : ( shape, start color, end color )
radial-gradient : ( size at x y, start color, end color )- shape
- eclipse : 타원 ( default )
- circle : 원
- size at x, y
- closest-side contain : 가장 가까운 모서리에 닿음
- closest-corner : 가장 가까운 코너에 닿음
- farthest-side : 가장 멀리 있는 모서리에 닿음
- farthest-corner ( default ) : 가장 멀리 있는 코너에 닿음
- positon : center ( default )
- shape
- radial-gradient : ( shape, start color, end color )
<!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>Document</title>
<style type="text/css">
div{width:200px;height:200px;}
.grad1{background: #f00;background:linear-gradient(to bottom,#f00,#00f);}
/* 방향 top left bottom right topleft 45deg 시작
to bottom, to right, to bottom right 45deg 끝 */
.grad2{background: #f00;background:linear-gradient(to bottom right,#f00,#00f);}
.grad3{background: #f00;background:linear-gradient(45deg,#f00,#0f0,#00f);}
.grad4{background: #f00;background:linear-gradient(45deg,red 0%,orange 10%,yellow 25%,green 40%,blue 60%,navy 80%,purple 100%);}
/* 기본 eclipse(타원),그 다음 원형 */
.grad5{background: #f00;width:500px;height:300px;background:radial-gradient(#f00 0%,#0f0 50%,#00f 100%);}
.grad6{background: #f00;width:500px;height:300px;background:radial-gradient(circle,#f00 0%,#0f0 50%,#00f 100%);}
/* closest-side contain 그라데이션이 가장 가까운 면과 만남
closest-corner 가장 가까운 코너와 만남
farthest-side 가장 멀리 있는 면과 만남
farthest-corner 가장 멀리 있는 코너와 만남*/
.grad7{background: #f00;width:500px;height:300px;background:radial-gradient(closest-side at 30% 30%,red,yellow,green);}
.grad8{background: #f00;width:500px;height:300px;background:radial-gradient(closest-corner at 30% 30%,red,yellow,green);}
.grad9{background: #f00;width:500px;height:300px;background:radial-gradient(farthest-side at 30% 30%,red,yellow,green);}
.grad10{background: #f00;width:500px;height:300px;background:radial-gradient(farthest-corner at 30% 30%,red,yellow,green);}
/* repeat */
.grad11{background:repeating-linear-gradient(yellow 0px,yellow 20px,red 20px,red 40px);}
.grad12{background:repeating-radial-gradient(yellow,yellow 20px,red 20px,red 40px);}
/* 그라디언트 자동생성 사이트 : http://www.colorzilla.com/graddient-editor */
.grad13{width:370px;height:50px;border-radius: 8px;
background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 32%, #a80077 69%, #db36a4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cb60b3 0%,#c146a1 32%,#a80077 69%,#db36a4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 32%,#a80077 69%,#db36a4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}
</style>
</head>
<body>
<h1>그라데이션</h1>
<div class="grad1"></div>
<div class="grad2"></div>
<div class="grad3"></div>
<div class="grad4"></div>
<div class="grad5"></div>
<div class="grad6"></div>
<div class="grad7"></div>
<div class="grad8"></div>
<div class="grad9"></div>
<div class="grad10"></div>
<div class="grad11"></div>
<div class="grad12"></div>
<div class="grad13"></div>
</body>
</html>
결과물
