box-shadow는 Geometry 계산에 포함되지 않는다(reflow가 일어나지 않는다.) ⇒ 이를 통해 성능상 이점을 얻을 수 있다.

• box-shadow는 border box 대용으로 사용가능
• box-shadow inset을 이용하여 여러개의 테두리를 만들 수 있다.
• outline이라는 속성은 box-shadow와 똑같은 위치에 그려진다. (reflow에 영향을 끼치지 않는다.)
• box-shadow는 border-radius의 영향을 받는데, outline은 영향을 받지 않는다.

Box-Sizing

<style>
div{width: 100px; height: 100px; padding: 10px; border:10px solid #000; display: inline-block}
</style>

<div style="background:red"></div>
<div style="background:blue;box-sizing:border-box"></div>

• box-model에서 box-sizing 기본값은 content-box이다.

<style>
div{width: 100px; height: 100px; padding: 10px; border:10px dashed #000; display: inline-block}
</style>

<div style="background:red"></div>
<div style="background:blue;box-sizing:border-box"></div>

• fragment의 영역은 border-box까지다.

<style>
div{width: 100px; height: 100px; padding: 10px; border:10px dashed #000; display: inline-block}
</style>

<div style="background:red"></div>
<div style="background:blue;box-shadow: 0 0 0 10px #aa0"></div>

• box-shadow는 geometry에 영향을 미치지 않는다.