[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 로 색을 지정해야함
휴... 동료 덕분에 힌트를 빨리 얻어 빠른시간에 해결할 수 있었다! 너무 소중한 소통!! 공유!!!
Author And Source
이 문제에 관하여([css] background 를 content 배경색만이 아니라 padding, border 의 배경색까지 지정할 수 있다니 ... 대박), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdgus0528/css-background-를-content-배경색만이-아니라-padding-border-의-배경색까지-지정할-수-있다니-...-대박저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)