[CSS] box-shadow

box-shadow

속성이 적용될 요소의 테두리를 감싸도록 그림자 효과를 추가한다.
쉼표로 구분하여 여러 그림자 효과도 입힐 수 있다.
구성요소는 그림자가 요소로부터 떨어진 거리(가로, 세로), 흐릿함과 확산 정도, 색상으로 이루어져 있다.

사용법

/* 필수 구성요소 */
box-shadow : <length> <length>; 

/* 선택적 구성요소 */ 
box-shadow : inset;
box-shadow : <color>;

구성 요소

<length>

• 2개의 값을 사용하면 : <offset-x> <offset-y> 로 분석
• 3번째 값이 주어지면 : <blur-radius> 로 분석
• 4번째 값이 주어지면 : <spread-radius> 로 분석

inset

• 값이 지정되지 않으면(기본값) : 요소가 공중에 떠있는 것처럼 바깥으로 지는 그림자 효과 적용
• inset 키워드가 주어지면 : 요소가 움푹 들어간 것처럼 안으로 지는 그림자 효과 적용
  그림자는 요소 테두리 안쪽, 배경색 상단, 내부 콘텐츠 하단에 위치

<color>

• 값이 주어지면 : 주어진 값에 따라 그림자에 색상 적용
• 값이 지정되지 않으면(기본값) : 기본 색상값 적용 (브라우저 별 상이)