CSS [적용 : 그림자 box-shadow 요소별 정리 ]

박스 주위에 그림자 적용시에 box-shadow 속성을 사용

box-shadow


	아래와 같이, box-shadow 속성은 4 개의 숫자와 색상 값을 지정합니다. .shadow { 　　-moz-box-shadow: 3px 3px 3px 3px #999; 　　-webkit-box-shadow: 3px 3px 3px 3px #999; 　　box-shadow: 3px 3px 3px 3px #999; 　　}
첫번째 열	수평 방향의 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 생깁니다.
두번째	수직 그림자 오프셋 길이를 나타냅니다. 양수 값을 지정하면 박스 아래에, 음수 값을 지정하면 박스 위에 그림자가 붙습니다.
3번째	그림자의 흐림 반경(blur radius)을 나타냅니다. 음수 값을 지정할 수는 없습니다. 값이 클수록 그림자의 끝이 흐려지고, 값이 "0"이면 그림자 끝이 흐려지지 않고 선명한 그림자가 됩니다.
4번째	그림자의 확산 거리(Spread distance)를 나타냅니다. 양수 값을 지정하면 그림자의 전방위로 확대되고, 음수 값을 지정하면 그림자의 크기가 줄어 듭니다. 양수 값을 지정하면 오른쪽에, 음수 값을 지정하면 왼쪽에 그림자가 붙습니다.
마지막	그림자의 색상 (color)을 지정합니다.

code loading...