box-shadow

그림자 효과

요소에 거리를 통한 깊이감, 현실성을 준다. `box-shadow` 속성으로 스타일링. 그림자의 위치, 크기, 흐림 정도, 색상을 조정할 수 있다.

box-shadow 

box-shadow: h-offset v-offset blur spread color | inset|initial|inherit;

• h-offset: 그림자의 수평 위치를 지정합니다.
• v-offset: 그림자의 수직 위치를 지정합니다.
• blur: 그림자의 흐림 정도를 지정합니다.
• spread: 그림자의 크기를 확장 또는 축소합니다.
• color: 그림자의 색상을 지정합니다.
• inset: 그림자를 요소의 내부에 삽입합니다.

적용

/* 외부 그림자 */ 
box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.5); 
/* 내부 그림자 */ 
box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5); 
/* 혼합 그림자 */ 
box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.5), inset 0 0 10px 5px rgba(0, 0, 0, 0.5);