Properties

Properties

Editing
  • account_tree
  • bug_report

box-shadow

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

설명

box-shadow:  horizontal-offset vertical-offset blur spread color [inset];

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

사용 가능한 값 타입

〈'box-shadow'〉

  • none | <shadow>#

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈shadow〉

    • <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?

일반적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • none

    어떠한 값도 설정하지 않음을 나타낸다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈box-shadow〉noneCSS3

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

구문

  • box-shadow none;CSS3

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

    요소의 그림자를 적용하지 않는다.
  • object.style.boxShadow = "10px 20px 30px blur";CSS3

    자바스크립트 형식

테스트 도구/예제

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

(2) 다중 그림자 적용

지원 웹브라우저