JULog

image 안쪽에 box-shadow

June 05, 2020

문제의 상황 및 요구사항

  • 이미지 자체 흰색 배경때문에 이미지의 경계가 불분명함
  • 유저에게 어색한 UI 제공
스크린샷 2020-06-06 오후 7 37 05

해결 방안

  • 가상 요소 :before
img {
  &:before {
	  content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1;
	}
}
  • box-shadow
img {
	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

=> border보다는 box-shadow를 줬다. border는 영역을 차지하고 box-shadow는 영역을 차지하지 않는다.

=> 경계를 줌으로써 조금은 더 자연스로운 UI를 보일 수 있다.

스크린샷 2020-06-06 오후 7 37 13
Written by@[Ju Chan Hwang]
JUlog에 오신걸 환영합니다🤗 저에 대해 궁금하다면, 👆제 이름을 눌러보세요

GitHubFacebook