box-shadow

 

출처: https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dahamee&logNo=220494959638

 

 

 box-shadow 속성은 그림자(Drop-Shadow)를 만들어 주는 기능을 한다.

     css3를 지원하는 브라우저와 모바일 웹브라우저에서 적용할 수 있다.

    형식 : box-shadow:1px 1px 1px rgba(0, 0, 0, .1);   x-offset, y-offset, blur, color의 순서

     ㆍx-offset : 정해진 수치만큼의 크기로 오른쪽에 그림자를 지정한다. 

                     -(마이너스)값은 왼쪽에 그림자를 지정한다.
     ㆍy-offset : 아래쪽에 정해진 수치만크의 크기로 그림자를 지정한다. 

                      -(마이너스)값은 위쪽에 그림자를 지정한다.
     ㆍblur : 정해진 수치만큼 그림자가 흐려지는 정도. t생략가능, default, 숫자가 클수록 흐려짐
     ㆍcolor : 그림자의 색상 지정. #FEFEFE  또는 rgba(0, 0, 0, 1) 방식 모두 사용 가능  
     ㆍrgba의 a값은 불투명도를 의미. 숫자 1은 원색 . 0.5 혹은 .5는 50%를 뜻한다.