HTML 그림자 (Box Shadow)

객체에 그림자 효과 (Box Shadow) 넣기

기본 문법

none | h-shadow v-shadow blur spread color

• none         : 그림자 효과 끄기
• h-shadow : (필수지정) 수평 그림자, 양수면 오른쪽에, 음수면 왼쪽에 그림자
• v-shadow : (필수지정) 수직 그림자, 양수면 아래쪽에, 음수면 위쪽에 그림자
• blur          : 그림자를 흐릿하게
• spread     : 양수면 그림자를 확장, 음수면 축소
• color        : 색상

CSS Style

(Style)    .class   { box-shadow: 5px 5px; }    #id      { box-shadow: 5px 5px; } (/Style)

DOM Style

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

Example

“파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"