[CSS] box-shadow inset

[탭 메뉴 클릭시 width가 늘어나는 현상을 해결하기 위한 방법]

tab 메뉴 클릭 시 border를 적용하면서 border의 px만큼 늘어나 클릭 시 메뉴가 흔들리는 이슈가 있었습니다.
px이 늘어나지 않게 하면서 border를 주기 위한 방법으로 box-shadow를 inset으로 적용하였습니다.

box-shadow: 0 0 0 3px inset;

box-shadow inset 적용모습

.tab { 
    width: 250px;
    height: 50px; 
    background: yellow;
    border: 1px solid #333; 
    box-shadow: 0 0 0 3px inset; 
    text-align: center; 
    line-height: 50px;
}

<이미지출처> https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow