[CSS] Border gradient 설정하기

위 이미지의 왼쪽 원 컴포넌트의 Border 를 주목하자

위와 같은 원 컴포넌트를 구현하기 위해 div 태그 안에 img 를 삽입하고
div 의 background-color는 transparent, border-radius는 50% 로 지정하고
마지막으로 border의 두께와 컬러면 지정하면 될 것이다.

하지만 border의 컬러를 linear-gradient로 지정해본 적이 있었나?
linear-gradient는 대부분 background 에서만 쓰인다.

---

border에 gradient를 적용하기 위해서
주로 사용하던 border 속성이 아닌 border-image 속성과 border-image-slice을 이용해야 한다.
이 문서 를 참고하면 linear-gradient 예제가 있다.
border-image-slice를 지정하지 않으면 border 가 보이지 않으니 주의하자.

여기서 border-image-slice는 뭘까?

border-image-slice 속성은 CSS에서 테두리 이미지를 분할하는 데 사용됩니다. border-image-slice의 값은 일반적으로 1에서 100 사이의 퍼센트 값이나 픽셀 단위로 설정됩니다. 이 값은 이미지를 9개의 영역으로 나누는 데 사용되며, 중앙의 영역은 보통 무시되고, 이미지의 가장자리가 테두리로 사용됩니다.
예를 들어, border-image-slice: 30%;는 이미지의 가장자리에서부터 안쪽으로 30% 지점까지를 테두리로 사용하고, 나머지 부분은 배경으로 사용하게 됩니다. 또한 fill 키워드를 사용하면 중앙의 영역도 테두리 영역에 포함시킬 수 있습니다. By ChatGPT

하지만 border-radius 속성을 지정해 주었도 적용이 되지 않았다.
border-image 속성은 border-radius 속성과 호환되지 않는다.

그렇기 때문에 border-image 속성을 대체하여 꼼수를 써서
background-image 속성과 background-clip속성을 함께 사용하자.

  style={{
         border: "1px solid transparent",
         backgroundImage:
         "linear-gradient(#f2f4f8, #f2f4f8), linear-gradient(140.19deg, #E960FF 27.37%, #0094FF 81.28%)",
         backgroundOrigin: "border-box",
         backgroundClip: "content-box, border-box",
        }}

1. 일단 테두리 영역을 border 속성으로 잡는다(색상은 투명색)
2. background-origin 속성으로 background를 설정할 영역을 테두리를 포함한 전체 박스를 기준으로 설정한다.
3. background-image 속성으로 두개의 linear-gradient 를 생성한다.
4. background-clip 속성으로 배경 색 혹은 이미지를 어디까지 나타낼 지 결정해야 한다. 이 속성이 쉼표로 구분이 되어 있는데 3번 과정에서 두개의 linear-gradient로 설정한 것들이 각각 어느 영역에 적용되는 지 매핑한다.

backgroundImage 에 지정된 두개의 gradient 속성 중 첫번째는 동일한 색을 넣어 단색(투명색)으로 해당 영역은 backgroundColor 를 지정하지 않은 듯한 효과를 주었고,
두번째 gradient 속성 은 테두리 영역에 실제로 넣고 싶은 속성이고 border-box 영역에 나타난다.

여기서 궁금증이 생겼다. content-box 영역과 border-box 영역의 교집합 부분이 content-box 영역인데 그렇다만 가장 위에 올라오는 background를 선정하는 기준은 뭘까?
찾은 해답은 다음과 같다.
backgroundClip 속성에서 지정한 순서대로 backgroundImage 가 맨 앞순서로 나타나게 되어 content-box 영역이 가장 위로 올라와 단색으로 보여질 수 있게 된다.