CSS box-shadow

text-shadow와 같이 요소의 그림자 효과을 주는 속성으로 배경을 기준으로 그림자 효과를 부여 합니다.

가로 세로 값은 필수입니다.

CSS text-shadow

box-shadow: h-shadow v-shadow blur spread color inset

h-shadow : 가로
v-shadow : 세로
blur : 번짐
spread : 그림자 크기
color : 색상
inset : 안쪽그림자 (기본 바같쪽)

기본값:없음, 상속:안됨, 버전:CSS3

box-shadow:10px 10px;

box-shadow:50px 50px 5px black;

box-shadow:50px 50px 50px 5px black;

box-shadow:10px 10px black inset;

box-shadow:10px 10px 5px black inset;

box-shadow:0 0 10px black;

box-shadow:10px 10px 10px #1652ad;

border:none

box-shadow:10px 10px 10px #1652ad;

마우스 액션 활용

마우스 클릭

:active  {  box-shadow:0px 0px 5px black inset; }

마우스 온

:hover   {  box-shadow:0px 0px 5px black; }