[CSS] 내부 border 설정하기
/* offset-x | offset-y | blur-radius | spread-radius | color */
element.style {
box-shadow: 0 0 0 10px #202020 inset;
}
일반적으로 border는 아래와 같이 선언합니다.
border: 10px solid #202020 ▶︎ 해당 elemenet의 border 너비는 3px로 약간 검정(#202020)의 직선(solid)으로 설정
position: fixed ▶︎ element의 위치를 화면의 고정 위치(fixed)에 표시
top: 100px ▶︎ element를 화면 기준 위에서 100px 만큼 아래로 이동하여 표시
left: 100px ▶︎ element를 화면 기준 왼쪽에서 100px 만큼 오른쪽으로 이동하여 표시
display: block ▶︎ element를 block 형태로 표시 (일부 element의 default는 normal이라 width나 height가 적용 안됨)
width: 100px ▶︎ 너비는 100px
height: 100px ▶︎ 높이는 100px
현재는 너비 x 높이가 각각 100px에 border가 10px 더해져서 총 120px의 영역을 차지하게 됩니다.
total width = with (100) + border left (10) + border right (10)
total height = height (100) + border top (10) + border bottom (10)
하지만, 만약 border가 지정되어도 100px로 고정되어서 칸이 이동되지 않아야 하는 경우도 있는데, 이런 경우에는 아래와 같이 내부 border가 아닌 box-shadow를 를 활용할 수 있습니다.
box-shadow: 0 0 0 10px #202020 inset ▶︎ 해당 elemenet의 block 내부에 너비는 10px로 약간 검정(#202020)의 색을 그림자 효과로 채움 설정
첫 번째 결과와 비교해보면,
20px 정보의 크기 차이가 납니다.
실제로, box-shadow는 border는 아니지만, border와 동일한 효과를 내는 것이며, 속성이 다르기 때문에 둘 다 사용하 실수도 있습니다.
box-shadow의 브라우저 호환성은 아래와 같습니다.
