box-shadow 속성 그림자 효과 css

box-shadow:none | 그림자값

그림자값 = <수평 거리> <수직거리> <흐림정도> <번짐정도> <색상> inset

 

수평거리와 수직거리는 반드시 지정해야 하고 나머지 속성값은 옵션사항이라 필요할 때 사용하면 됩니다.

 

box-shadow 속성

수평거리(필수속성)	그림자의 수평거리(수평으로 얼마나 떨어져 있는지) 양수값은 대상의 오른쪽, 음수값은 요소의 왼쪽
수직거리(필수속성)	세로로 얼마나 떨어져 있는지 양수값은 대상의 아래쪽, 음수값은 대상의 위쪽 그림자 표시
흐림정도	값이 커질수록 그림자가 부드러워지고 생략하면 기본값이 0이 되면서 진한 그림자를 표시한다. 그림자를 표시하면 음수값은 사용할 수 없다.
번짐정도	양수값은 그림자가 모든 방향으로 퍼져나가고 음수값은 모든방향으로 축소되어져서 보인다. 기본값은 0으로 설정된다.
색상	한가지 색상으로 표현할 수 있고 공백으로 구분해서 여러개로 색상을 지정하 ㄹ수도 있다. 기본값은 현재 글자색
inset	안쪽 그림자로 그림

 

 예제

box1 {
    -webkit-box-shadow: 1px 2px 10px 1px rgba(0,0,0,.2);
    box-shadow: 1px 6px 10px 0px rgba(0,0,0,.2);
}

.box2 {
    box-shadow: 1px 5px 10px 5px grey;
}