[CSS] 이미지 테두리에 그림자

원 형태의 소셜 로그인 이미지 버튼에 그림자를 주려했으나 box-shadow 을 주니 네모난 모양의 그림자가 생겨 방법을 찾으니

기존에 박스형태의 태그에 그림자 주는 방식은 box-shadow 속성을 주었지만 이미지에 그림자를 주려면 CSS filter 속성 중 drop-shadow을 주면된다.

※ CSS filter : 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용하며 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 사용됨 + 최신브라우저만 지원하므로 확인하고 사용해야한다

drop-shadow(x y blur color)

styled-component 로 적용한 모습

const ImgBox = styled.div`
width: 200px
img {
width: 100%;
filter: drop-shadow(0px 2px 8px rgb(99 99 99 / 30%))
{
`

---

참고

[필터 관련 정리] https://ossam5.tistory.com/249
[MDN] https://developer.mozilla.org/ko/docs/Web/CSS/filter