그림자 (shadow)

box-shadow 효과를 주어 요소를 돋보아 보이게 하거나 분리 시켜줄때 주로 사용합니다.

그림자 크기

.shadow-none

.shadow-sm

.shadow-md

.shadow-lg

.shadow-xl

<div class="shadow-none" style="height: 50px">
	.shadow-none
</div>
<div class="shadow-sm" style="height: 50px">
	.shadow-sm
</div>
<div class="shadow-md" style="height: 50px">
	.shadow-md
</div>
<div class="shadow-lg" style="height: 50px">
	.shadow-lg
</div>
<div class="shadow-xl" style="height: 50px">
	.shadow-xl
</div>

가운데 그림자

가운데 방향으로 퍼져나가는 그림자입니다.

.shadow-center-sm

.shadow-center-md

.shadow-center-lg

.shadow-center-xl

<div class="shadow-center-sm" style="height: 50px">
	.shadow-center-sm
</div>
<div class="shadow-center-md" style="height: 50px">
	.shadow-center-md
</div>
<div class="shadow-center-lg" style="height: 50px">
	.shadow-center-lg
</div>
<div class="shadow-center-xl" style="height: 50px">
	.shadow-center-xl
</div>