drop-shadow 함수

함수 drop-shadow는 배경 이미지에 그림자를 추가할 수 있게 해줍니다.

구문

선택자 {
	filter: drop-shadow(x축 이동, y축 이동, 흐림 반경, 색상);
}

값

값	설명
x축 이동	배경을 기준으로 그림자의 수평 이동. 양수는 그림자를 오른쪽으로 이동시키고, 음수는 왼쪽으로 이동시킵니다. 필수 매개변수입니다.
y축 이동	배경을 기준으로 그림자의 수직 이동. 양수는 그림자를 아래쪽으로 이동시키고, 음수는 위쪽으로 이동시킵니다. 필수 매개변수입니다.
흐림	그림자의 흐림 반경을 설정합니다. 값이 클수록 그림자가 더 흐려집니다. 선택적 매개변수입니다. 기본값은 `0`입니다.
색상	그림자의 색상. 선택적 매개변수입니다. 기본적으로 그림자 색상은 검정색으로 설정됩니다.

예시

이미지에 축 이동 없이 5px 흐림을 가진 하늘색 그림자를 설정해 봅시다:

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

참고 항목

함수 blur,
배경을 흐리게 합니다
함수 brightness,
배경의 밝기를 설정합니다
함수 contrast,
배경의 대비를 설정합니다
함수 hue-rotate,
배경의 색조를 설정합니다
함수 invert,
배경 색상을 반전시킵니다
함수 opacity,
배경의 투명도를 설정합니다
함수 sepia,
배경을 세피아 톤으로 변환합니다
속성 background,
배경에 대한 단축 속성입니다
속성 background-image,
블록에 배경 이미지를 설정하는 데 사용됩니다