스타일 boxShadow 속성
예시
div 요소에 box-shadow 추가:
document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";
정의 및 사용
boxShadow 속성은 상자 요소의 그림자를 설정하거나 반환합니다.
브라우저 지원
Property | |||||
---|---|---|---|---|---|
boxShadow | Yes | 9.0 | Yes | 5.1.1 | Yes |
통사론
boxShadow 속성을 반환합니다.
object.style.boxShadow
boxShadow 속성을 설정합니다.
object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"
참고: boxShadow 속성은 상자에 하나 이상의 그림자를 첨부합니다. 속성은 쉼표로 구분된 그림자 목록으로, 각각은 2-4개의 길이 값, 선택적 색상 및 선택적 삽입 키워드로 지정됩니다. 생략된 길이는 0입니다.
속성 값
Value | Description |
---|---|
none | Default value. No shadow is displayed |
h-shadow | Required. The position of the horizontal shadow. Negative values are allowed |
v-shadow | Required. The position of the vertical shadow. Negative values are allowed |
blur | Optional. The blur distance |
spread | Optional. The size of shadow |
color | Optional. The color of the shadow. The default value is black. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 없음 |
---|---|
반환 값: | 요소의 box-shadow 속성을 나타내는 String |
CSS 버전 | CSS3 |
관련 페이지
CSS 참조: box-shadow 속성
❮ 스타일 개체