Properties

Properties

Draft
  • account_tree
  • bug_report

box-shadow

요소에게 그림자를 적용한다.

설정 가능한 속성 값

  • none기본값키워드CSS3

    기본 값이며 그림자 처리를 하지 않는다.

  • horizontal-offset숫자CSS3

    그림자의 수평 위치 값이다. 양수인 경우에는 요소의 오른쪽 방향으로 음수인 경우에는 요소의 왼쪽 방향에 그림자의 위치를 설정한다.

    • 음수 허용
  • vertical-offset숫자CSS3

    그림자의 수직 위치 값이다. 양수인 경우에는 요소의 아래쪽 방향으로 음수인 경우에는 요소의 위쪽 방향에 그림자의 위치를 설정한다.

    • 음수 허용
  • blur숫자CSS3

    숫자와 픽셀 단위를 이용하여 흐림 반경을 설정한다. 숫자가 높을수록 그림자가 더 흐려진다.

  • spread숫자CSS3

    그림자의 퍼짐 반경을 설정한다. 양수 값을 지정하면 그림자가 커지고 음수 값을 지정하면 그림자의 크기가 준다.

    • 음수 허용
  • color색상값CSS3

    CSS에서 가능한 방법으로 색상을 설정한다. 기본 값은 텍스트 색이다.

  • inset키워드CSS3

    그림자의 기준 위치를 요소 내부로 한다. 기본 값은 요소의 외부이다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • box-shadow none;기본값CSS3

    그림자 처리를 하지 않는다.

    요소의 그림자를 적용하지 않는다.
  • box-shadow horizontal-offset vertical-offset blur spread color inset;기본형식CSS3

    수평 오프셋(horizontal offset), 수직 오프셋vertical-offset, 흐림 정도(blur), 퍼짐 정도(spread), 색상(color), 요소 안쪽 그림자의 위치(inset)를 차례대로 설정하여 그림자 처리를 한다. 수평, 수직 오프셋은 필수 설정 값이며 흐림정도(blur), 퍼짐 정도(spread), 색상(color), 안쪽 그림자(inset)은 선택적으로 설정할 수 있는 옵션이다.

  • object.style.boxShadow = "10px 20px 30px blur";자바스크립트 형식CSS3

    자바스크립트 형식

테스트 도구/예제

(1) 요소의 그림자 적용 테스트

(2) 다중 그림자 적용

지원 웹브라우저