CSS box-shadow 속성
예시
다른 <div> 요소에 그림자 추가:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 box-shadow
요소에 하나 이상의 그림자를 첨부합니다.
기본값: | 없음 |
---|---|
상속: | 아니요 |
애니메이션 가능: | 예. 애니메이션 가능 에 대해 읽기 |
버전: | CSS3 |
자바스크립트 구문: | 개체 .style.boxShadow="10px 20px 30px 파란색" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 또는 -moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS 구문
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
참고: 요소에 둘 이상의 그림자를 첨부하려면 쉼표로 구분된 그림자 목록을 추가하십시오(아래 "직접 사용해 보기" 예 참조).
속성 값
Value | Description | Play it |
---|---|---|
none | Default value. No shadow is displayed | |
h-offset | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box | |
v-offset | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box | |
blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be | |
spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | |
color | Optional. The color of the shadow. The default value is the text color. 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 |
더 많은 예
예시
그림자에 흐림 효과 추가:
#example1 {
box-shadow: 10px 10px 8px #888888;
}
예시
그림자의 확산 반경 정의:
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
예시
다중 그림자 정의:
#example1 {
box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}
예시
삽입 키워드 추가:
#example1 {
box-shadow: 5px 10px inset;
}
예시
테이블에 던져진 이미지. 이 예에서는 "폴라로이드" 사진을 만들고 사진을 회전하는 방법을 보여줍니다.
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
관련 페이지
CSS 튜토리얼: CSS 상자 그림자
HTML DOM 참조: boxShadow 속성