CSS : radial-gradient

프로젝트 하다가 css radial-gradient 속성을 알게 되어 정리함

테두리를 원형으로 만들때는 보통 border-radious를 사용함

<border-radious를 사용한 예시>

형광펜으로 표시한 예시를 보면 ,
border-radious는 테두리 바깥쪽을 원형으로 만드는 속성이다.

그러나 프로젝트에서 써야하는 속성은 안쪽 원형이 아닌
바깥쪽 원형이였다. 여기서 border-radious를 사용할 수 없음을 깨달음

위에 그림처럼 양쪽 모서리 경계가 바깥쪽 원형으로 만들어야 됨
그래서 클론 하는 사이트 가보고
stack overflow 사이트 가보니
radial-gradient 예시가 있어서 적용했다.

출처: https://stackoverflow.com/questions/32241423/how-to-add-shadow-to-reverse-c-radial-gradient-only-at-the-edges

radial-gradient: 원형 그러데이션 , 원 또는 타원의 중심에서부터
동심원을 그리며 바깥 방향을 색상이 바뀐다.

<기본형>

radial-gradient(<모양> <크기> at <위치>, <색상 중지점>,

[<색상 중지점>,.....])

< 내가 적용한 코드 예시 >

 background: radial-gradient(
      circle at 0 100%,
      rgba(204, 0, 0, 0) 19px,
      white 20px
    ),
radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 19px, white 20px),
radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 19px, white 20px),
radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 19px, white 20px);

* radial-gradient 속성

모양 : ellipse - 타원형을 나타내며 기본값
circle- 원형의 그러데이션