CSS -background 그라이데이션

background 속성값으로 linear-gradient 함수 사용

linear-gradient : 엘리먼트에 선형 그라데이션 효과를 제공하는 함수
그라데이션(Graduention) 효과 : 색이 한쪽방향으로 일정하게 변화되어 출력되는 효과
linear-gradient(진행방향, 시작색, 종료색)
진행방향 : 각도(deg), 키워드(to left, to right, to top, to bottom)

선택자{
예시
background: linear-gradient(45deg, red, white);
/* 시작색 뒤에 중간색 중간 표현 가능 - 중간색에 백분율 사용 */
	background: linear-gradient(225deg, olive, white 30%, olive);
/* 중간색에 백분율이 생략된 경우 자동으로 50%로 사용 */
    background: linear-gradient(to right, yellow, orange, red);
}

background 속성값으로 radial-gradient 함수 사용
radial-gradient : 엘리먼트에 원형 그라데이션 효과를 제공하는 함수
형식)radial-gradient(모양, 시작색, 종료색
모양 : circle, ellipse
원의 중심위치는 박스모델의 가운데로 설정
원의 중심위치 변경 가능 - 특정 브라우저에서만 가능

예시
선택자{
background: radial-gradient(circle, white, blue);
background: -webkit-radial-gradient(70% 70%,circle, white, blue);
background: radial-gradient(ellipse, white, orange 30%, red);
}

CSS 표준규약에 정의되어 있지 않고 특정 웹브라우저에만 사용 가능한 스타일 속성값 존재
-webkit- : 웹킷 방식의 웹브라우저 - 크롬, 사파리, 엣지 등
-moz- : 개코 방식의 웹브라우저 - 파이어폭스, 모질라 등
-o- : 오페라 방식의 웹브라우저 - 오페라 등
-ms- : 트라이던트 방식의 웹브라우저 - IE 등