[CSS]png 이미지에 그림자 효과 넣기

보통 CSS로 그림자를 넣을 때 box-shadow 를 이용한다. 

 

.img1{box-shadow: 5px 5px 5px #000;}

그런데 이렇게 되면 박스를 기준으로 그림자가 생성되기 때문에  투명한 부분이 포함된 이미지 전체 영역에 그림자가 생긴다 .

 

 

filter속성을 이용해 drop-shadow 효과로 이미지 자체에 그림자를 넣을 수 있다. 

 

 

.img2{filter: drop-shadow(5px 5px 5px #000); }