css : ) border에 그라데이션 넣기

인스타그램 클론하는중 border에 그라디언트로 색상을 입히는게 간단한줄 알았는데 호환이 안되는것들이 있어 정리한다.

//HTML
  <div class="profileImg1"></div>
  <div class="profileImg2"></div>

//CSS
.profileImg1 {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 10px;
    background-color: #fff;
    border: 3px solid transparent;
    border-radius: 50%;
    border-image: linear-gradient(to right, red 0%, orange 100%);
    border-image-slice: 1;
}

border-image - MDN
구글링한 결과 border에 그라데이션을 설정하는 방법은 border-image,border-image-slice 속성을 이용해서 그라데이션을 넣을 수 있다.

하지만 위 코드를 보면 border-radius에linear-gradient가 적용이 되지 않았다.

border-image 속성과 border-radius 속성이 호환이되지 않기 때문.

//CSS
.profileImg2 {
    position: relative;
    width: 70px;
    height: 70px;
    margin: 10px;
    border: 3px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#fff, #fff), 
    linear-gradient(to right, red 0%,  orange 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

border-image를 대신해 background를 이용해 border-radius에 그라데이션을 설정하려면
보더의 색을 투명하게 한 뒤, background에 보더 색을 설정하면 된다.

background 에 그라데이션 설명을 하자면 background: linear-gradient(컨텐츠 색상),linear-gradient(보더 색상);
이렇게 설정해주면 된다.

background-origin
배경 이미지를 어느 영역부터 채워나갈지를 정합니다.
(기본값 : padding-box)

background-clip
배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성입니다.
(기본값 : border-box)

background-origin / clip

border-box : 테두리 영역 왼쪽 위부터 채웁니다.
padding-box : 안쪽 여백 영역 왼쪽 위부터 채웁니다.
content-box : 내용 영역 왼쪽 위부터 채웁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

---

이걸 하고 싶엇다..ㅎㅎ