CSS : radial-gradient
프로젝트 하다가 css radial-gradient 속성을 알게 되어 정리함
테두리를 원형으로 만들때는 보통 border-radious를 사용함
<border-radious를 사용한 예시>
형광펜으로 표시한 예시를 보면 ,
border-radious는 테두리 바깥쪽을 원형으로 만드는 속성이다.
그러나 프로젝트에서 써야하는 속성은 안쪽 원형이 아닌
바깥쪽 원형이였다. 여기서 border-radious를 사용할 수 없음을 깨달음
위에 그림처럼 양쪽 모서리 경계가 바깥쪽 원형으로 만들어야 됨
그래서 클론 하는 사이트 가보고
stack overflow 사이트 가보니
radial-gradient 예시가 있어서 적용했다.
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- 원형의 그러데이션
Author And Source
이 문제에 관하여(CSS : radial-gradient), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sgw7546/CSS-radial-gradient저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)