[css] background 를 content 배경색만이 아니라 padding, border 의 배경색까지 지정할 수 있다니 ... 대박

인스타 클론 중 아래 css 문제에 봉착했다...

구현목표

인스타를 클론하기 위해 작업 중, 아래 사진처럼 story 띠 만들기

했던 시도들...

1번째 시도

사진에 border 에 색을 주고 padding 주기.

border: 1px solid 색;
padding: 1px;

실패 -> 이유: border 에서 색은 그라데이션이 안됨.

2번째 시도

1) 사진 부모 요소에 div를 만들기
2) 부모 div에 색 주기
3) 중앙정렬
4) 사진에 패딩주기

.parentDiv{
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to left bottom, #ff5f5f, #fdae65);
  width: img 보다 2px 크게;
  height: img 보다 2px 크게;
}
img{
  padding: 1px;
}

실패 -> 이유: 중앙정렬했지만 묘하게 중앙이 아님...

성공!!!

background 속성에 background-origin 사용하여 padding 과 border에도 색을 지정하기!

• !! background 속성에 padding-box와 border-box에 linear-gradient 색상 주기
• border 속성을 지정하고 투명색 주기
• padding 값 주기

border: 4px solid transparent;
background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to left bottom, #ff5f5f, #fdae65) border-box;
padding: 1px;

주의!

• border 값에는 transparent 색 지정하기
• background 에 값을 줄때 padding-box 주고 order-box 줘야함
• 둘다 linear-gradient 로 색을 지정해야함

[MDN] background-origin

휴... 동료 덕분에 힌트를 빨리 얻어 빠른시간에 해결할 수 있었다! 너무 소중한 소통!! 공유!!!