Style boxShadow 속성

정의 및 사용법

boxShadow 속성은 브릭 요소에 프로젝션 (drop-shadow)을 설정합니다.

다른 참조:

CSS 참조 매뉴얼:box-shadow 속성

예제

div 요소에 box-shadow 추가:

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";

직접 시험해 보세요

문법

boxShadow 속성 반환:

object.style.boxShadow

boxShadow 속성 설정:

object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"

주석:boxShadow 속성은 브릭에 하나 이상의 그림자를 추가합니다. 이 속성은 콤마로 구분된 그림자 목록으로 구성되며, 각 그림자는 2-4 개의 길이 값, 선택 사항의 색상 값 및 선택 사항의 inset 키워드로 정의됩니다. 길이 값을 생략하면 0입니다.

속성 값

값 설명
none 기본 값. 그림자를 표시하지 않습니다.
h-shadow 필수. 수평 그림자의 위치. 음수 값을 허용합니다.
v-shadow 필수. 수직 그림자의 위치. 음수 값을 허용합니다.
blur 선택 사항. 흐림 거리.
spread 선택 사항. 그림자의 크기.
color

선택 사항. 그림자의 색상. 기본 값은 검정색입니다.

참조: CSS 색상 값가능한 색상 값의 전체 목록을 확인하십시오.

ヒント:Safari (PC에서)color 파라미터는 필수입니다. 색상을 지정하지 않으면 그림자가 표시되지 않습니다.
inset 선택 사항. 외부 그림자 (outset)를 내부 그림자로 변경합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조: initial。
inherit 부모 요소에서 이 속성을 상속합니다. 참조: inherit。

기술 세부 사항

기본 값: 없음
반환 값: 문자열로, 요소의 box-shadow 속성。
CSS 버전: CSS3

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 9.0 지원 5.1 지원