[CSS] border에 그라데이션 넣기

border에 그러데이션을 넣기 위해 사용 가능한 코드는 아래와 같다. 

좀 더 자세한 설명을 원한다면 추가설명을 읽어보는 걸 추천한다.

 

HTML

<div class="gradient-avatar"></div>

CSS

.gradient-avatar {
  width: 100px;
  height: 100px;
  background: url(https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory4.daumcdn.net%2Ftistory%2F4809359%2Fattach%2F1af7989e615749b0b3f522ea82e59ba8) padding-box,
    linear-gradient(90deg, #eaeaa7 , #ffcdf3aa, #c1b0e6) border-box;
  background-size: contain;
  border-radius: 50%;
  border: 4px solid transparent;
}

 

 

결과물

우주 테마에 맞게 살짝 그라데이션을..

 

 

 

 

---

추가 설명

border에 그라데이션을 줘야 할 때 가장 먼저 생각난 방법으로는 border-image 속성을 사용하는 방법이였다.

 

HTML

<div class="gradient-box"></div>

 

CSS

.gradient-box {
  width: 100px;
  height: 100px;
  border: 4px solid;
  border-image: linear-gradient(to right, #eaeaa7 , #ffcdf3aa, #c1b0e6) 1; /* boder-image-slice : 1 */
 }

border-image에 url 대신에 linear-gradient로 원하는 색의 그러데이션 효과를 넣어준 뒤 

border-image-slice 속성을 조절 (1) 해주면 아래와 같은 결과물이 나온다

 

 

여기서 가장 큰 문제는 위 방법은 border-radius랑 같이 사용을 할 수가 없다는 점이었다.

 

그래서 검색을 해서 알아낸 방법은 가장 처음에 언급했던 방법인 background와 background-clip 속성을 사용하는 것이었다.

 

첫 번째 배경 부분에는 사용할 url이 있으면 url을 넣거나 그냥 비어있다면 linear gradient로 원하는 색상을 지정해주면 된다.

여기서 중요한 건 background-clip 속성을 padding-box로 지정해줘야 한다 (border를 제와한 모든 콘텐츠까지 적용되도록).

 

그 밑에 사용된 linear-gradient가 최종 그러데이션 효과를 주는 데 사용되었고 background-clip을 border-box로 지정해줬다.

 

마지막으로 투명(transparent)한 border가 필요한 이유는 border-box와 padding-box를 설정함으로 인해 겹쳐지는 border 부분을 첫 번째 설정한 배경 또는 색이 덮어 씌우지 않도록 하기 위해서이다. 

 

참고자료

 

CSS Gradient Borders | CodyHouse