CSS drop-shadow() 함수

정의와 사용법

CSS의 drop-shadow() 필터 함수는 이미지에 투영 효과를 적용합니다.

이미지에 다른 투영 효과를 추가합니다:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

이미지에 다른 투영 효과를 추가합니다. (양수의 수평과 수직 그림자를 사용):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

값	설명
h-shadow	必需. 수평 그림자의 픽셀 값을 지정합니다. 음수 값은 그림자를 이미지 왼쪽에 배치합니다.
v-shadow	必需. 수직 그림자의 픽셀 값을 지정합니다. 음수 값은 그림자를 이미지 위에 배치합니다.
blur	선택 사항. 그림자에 모호한 효과를 추가합니다. 단위는 픽셀입니다. 값이 클수록 모호한 효과가 더 강해집니다. (그림자는 더 크고 더 희미해집니다). 음수 값을 사용하지 않습니다. 지정하지 않으면 기본적으로 0으로 설정됩니다. (그림자 경계는 명확합니다).
spread	선택 사항. 항상 픽셀 값이어야 합니다. 양수는 그림자를 확장하고 크게 만들어줍니다. 음수는 그림자를 축소합니다. 지정하지 않으면 기본적으로 0으로 설정됩니다. (그림자는 요소 크기와 같습니다).
color	선택 사항. 그림자에 색상을 추가합니다. 지정하지 않으면, 색상은 브라우저에 따라 다릅니다. (대부분 검은색입니다).

버전：	CSS Filter Effects Module Level 1

표에 나타난 숫자는 이 함수를 최초로 완전히 지원한 브라우저 버전입니다.

크롬	에지	파이어폭스	사파리	오페라
18	12	35	6	15