[css] gradient

https://developer.mozilla.org/ko/docs/Web/CSS/gradient

<gradient> - CSS: Cascading Style Sheets | MDN

선형 그라디언트

linear-gradient (to [방향] or [각도], [색상중지점], <[색상중지점,...]>);

background-color로 작성하면 적용이 되지않음 무조건 background(자세한 내용은 MDN에 적혀있음)

예)background: linear-gradient(to right bottom, blue,white);

예)를 설정했을 때의 결과

방향에 관한 예약어는 최대 2가지 가능(수평:left right 수직: top bottom)

각도: deg로 표기. 맨 위, x,y축으로 표현할때 1,2 사분면의 y축이 0도로 시작한다.(각도는 시계방향으로 +).

색상 중지점: 그라데이션에서 색상이 바뀌는 위치

예) background: linear-gradient(to right bottom[방향],blue[시작색상], blue 30%[색상중지점],white[끝색상] )

     

&amp;nbsp;예)를 설정했을 때의 결과

---

radial-gradient:([모양]or[크기] at [위치], [색상중지점], <[색상중지점,...]>);

모양: circle ellipse

크기: closest-side(가장 가까운 측면까지) | closest-corner(가장  가까운 코너까지) | farthest-side(가장 먼 측면까지)

         | farthest-corder(가장 먼 코너까지)  

위치: 그라데이션이 시작하는 원의 중심을 다르게 표현할 수 있음. (left center right 중 하나 or top center bottom 중 하나// 백분율)

색상 중지점: 그라데이션에서 색상이 바뀌는 위치

---

repeating-(그라데이션 반복)

위의 경우들과 같은 argument를 갖고있지만, 끝나는게 아니고 컨테이너의 끝까지 반복하게 됨

예) ①background: repeating-linear-gradient(yellow, yellow 20px, red 20px, red 40px);

     ②background: repeating-radial-gradient(circle, white, white 10%, #ccc 10%,#ccc 20%);

좌 ① 우 ②