[CSS] box-shadow : 박스에 그림자 만드는 속성

box-shadow : 그림자 효과를 만드는 속성

 

문법 

box-shadow : none;
/*그림자 효과를 제거 */

box-shadow : red 50px -15px 30px 0px;
/*<색상> <x 위치> | <y 위치> | <blur 값(클수록 흐릿해짐)> | <spread 그림자 확장/축소(양수면 확장> */

box-shadow : 50px -15px 30px 0px red inset;
/*inset : 내부그림자 생성* -> initial inherit 도 넣을 수 있음 /

 

 

필수 요소

• x-position(x 위치) : 가로 위치로 양수면 오른쪽 음수면 왼쪽에 그림자 생성
• y-position(y 위치) : 세로 위치로 양수면 아래쪽, 음수면 위쪽에 그림자 생성 

 

기타 요소 

• color : 그림자 색상 지정
• blur : 값이 클 수록 그림자를 흐릿하게 만듬
• spread : 양수면 그림자 확장, 음수면 축소
• inset : 그림자를 요소 안쪽에 생성
• inherit : 부모 요소 값을 자식 요소에게 상속 시킴 

 

글자에게 그림자 효과를 주는 text-shadow도 똑같이 사용가능