CSS / box-shadow / 박스에 그림자 효과 만드는 속성
개요
box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다.
- 기본값 : none
- 상속 : No
- 애니메이션 : Yes
- 버전 : CSS Level 3
문법
|
1 |
box-shadow: none | x-position y-position blur spread color | inset | initial | inherit |
- none : 그림자 효과를 없앱니다.
- x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수)
- y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 위쪽에 그림자가 만들어집니다. (필수)
- blur : 그림자를 흐릿하게 만듭니다. 값이 클 수록 더욱 흐려집니다.
- spread : 양수면 그림자를 확장하고, 음수면 축소합니다.
- color : 그림자 색을 정합니다.
- inset : 그림자를 요소의 안쪽에 만듭니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { width: 600px; margin-bottom: 20px; padding: 10px 30px; background-color: yellow; } .a { box-shadow: 5px 5px; } .b { box-shadow: 5px 5px 5px; } .c { box-shadow: 5px 5px 5px 5px; } .d { box-shadow: 5px 5px 5px 5px gray; } .e { box-shadow: 5px 5px 5px 5px gray inset; } </style> </head> <body> <div class="a"> <p><code>box-shadow: 5px 5px;</code></p> </div> <div class="b"> <p><code>box-shadow: 5px 5px 5px;</code></p> </div> <div class="c"> <p><code>box-shadow: 5px 5px 5px 5px;</code></p> </div> <div class="d"> <p><code>box-shadow: 5px 5px 5px 5px gray;</code></p> </div> <div class="e"> <p><code>box-shadow: 5px 5px 5px 5px gray inset;</code></p> </div> </body> </html> |
브라우저 지원
- Chrome : 10.0+
- Firefox : 4.0+
- Internet Explorer : 9.0+
- Opera : 10.5+
- Safari : 5.1+