메가게임잼 2022년 사이트 클론 코딩 중,
border-color에 linear-gradient (그라데이션)넣는 방법이 먹히지 않아서 구글링을 하던 중 괜찮은 방법을 찾아서 작성하게 되었다.
(border-image와 border-radius가 서로 호환되지 않는 이슈도 발생!)
border는 색은 투명 (transparent)로 지정하고,
background에 linear-gradient를 입혀서 그라데이션을 지정하면 된다.
border: 5px solid transparent;
border-radius: 10px;
background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
background-origin: border-box;
background-clip: content-box, border-box;background-origin
배경 이미지를 어느 영역부터 채워나갈지를 정합니다.
(기본값 : padding-box)
background-clip
배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성입니다.
(기본값 : border-box)
background-origin / clip
border-box : 테두리 영역 왼쪽 위부터 채웁니다.
padding-box : 안쪽 여백 영역 왼쪽 위부터 채웁니다.
content-box : 내용 영역 왼쪽 위부터 채웁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.