CSS / box-shadow - 박스에 그림자 효과 만드는 속성

개요

box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다.

  • 기본값 : none
  • 상속 : No
  • 애니메이션 : Yes
  • 버전 : CSS Level 3

문법

  • none : 그림자 효과를 없앱니다.
  • x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수)
  • y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어집니다. (필수)
  • blur : 그림자를 흐릿하게 만듭니다. 값이 클 수록 더욱 흐려집니다.
  • spread : 양수면 그림자를 확장하고, 음수면 축소합니다.
  • color : 그림자 색을 정합니다.
  • inset : 그림자를 요소의 안쪽에 만듭니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

브라우저 지원

  • Chrome : 10.0+
  • Firefox : 4.0+
  • Internet Explorer : 9.0+
  • Opera : 10.5+
  • Safari : 5.1+