CSS box-shadow 속성
정의와 사용법
box-shadow 속성은 박스에 하나 이상의 그림자를 추가합니다.
팁:gorgeous scalable buttons를 구축하기 위해 border-image-* 속성을 사용하세요!
또한 참조:
CSS3 가이드:CSS3 밑줄
HTML DOM 참조 가이드:boxShadow 속성
실례
div 요소에 box-shadow를 추가합니다:
div
{
box-shadow: 10px 10px 5px #888888;
}
페이지 하단에 더 많은 예제가 있습니다.
CSS 문법
box-shadow: h-shadow v-shadow blur spread color inset;
주석:box-shadow은 박스에 하나 이상의 그림자를 추가합니다. 이 속성은 쉼표로 구분된 그림자 목록으로 정의되며, 각 그림자는 2-4 개의 길이 값, 선택 사항의 색상 값, 선택 사항의 inset 키워드로 정의됩니다. 길이 값을 생략하면 0입니다.
속성 값
| 값 | 설명 | 테스트 |
|---|---|---|
| h-shadow | 필수. 수평 그림자의 위치. 부정 값을 허용. | 테스트 |
| v-shadow | 필수. 수직 그림자의 위치. 부정 값을 허용. | 테스트 |
| blur | 선택 사항. 모호한 거리. | 테스트 |
| spread | 선택 사항. 그림자의 크기. | 테스트 |
| color | 선택 사항. 그림자의 색상. CSS 색상 값을 참조하세요. | 테스트 |
| inset | 선택 사항. 외부 그림자 (outset)를 내부 그림자로 변경합니다. | 테스트 |
기술 세부 사항
| 기본값: | none |
|---|---|
| 상속성: | no |
| 버전: | CSS3 |
| JavaScript 문법: | object.style.boxShadow="10px 10px 5px #888888" |
更多实例
- 탁자 위에 던진 이미지
- 이 예제에서 '폴리오' 이미지를 생성하고 이미지를 회전하는 방법을 보여줍니다.
브라우저 지원
표의 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 기재하고 있습니다.
-webkit- 또는 -moz-로 시작하는 숫자는 프리픽스를 사용하는 첫 번째 버전을 의미합니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
