[CSS] 박스-shoadow로 음영을 줬나요!?

개시하다

CSS에 음영을 넣을 때 가장 먼저 생각난다box-shadow나도 별다른 생각 없이 사용했다box-shadow.
편리한 CSS 함수filter: drop-shadow()를 정리하고 싶습니다.

box-shoadow와drop-shoadow의 그림 그리기 차이

우선, 각 그림의 다른 점은 여기에 있다

box-shadow

svg 이미지의 전체 상자 요소에 직사각형 음영

위원소는 영향을 받지 않는다

drop-shadow

svg 이미지 자체의 모양과 일치하는 음영

위원소에도 음영이 있다

샘플 코드

http://runstant.com/cigar/projects/css-tips-drop-shadow

drop-shoadow 사용법

filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.5));

매개 변수

filter: drop-shadow( 水平位置, 垂直位置, ぼかし具合, 色 )

수평 위치(필수)

x축의 위치.지정된 숫자만큼 오른쪽으로 이동
마이너스로 왼쪽으로 이동할 수도 있어요.

수직 위치(필수)

Y축의 위치.지정된 숫자 값 아래로 이동
마이너스로 올라갈 수도 있고.

모호도 (임의)

blur 값.값이 클수록 그림자가 넓어지고 얇아집니다.
지정하지 않은 경우 규정치의 0으로 흐릿하지 않고 뚜렷한 그림자로 변한다
빼기를 지정할 수 없습니다.

색상(모두)

그림자 색깔이에요.투명도를 지정할 수도 있습니다.
지정하지 않은 경우 기본값은 브라우저에 의해 결정됩니다.

drop-shoadow의 약점

공부하고 있으니 이제 필요 없겠지!내 생각엔box-shadow는 drop-shadow에서 지정할 수 있습니다.
음영의 확장 거리와 inset (내부 음영) 을 지정할 수 없습니다.
원하는 shadow에 따라 구분해서 사용하는 게 좋아요.

끝말

위svg 그림과 일치하는 그림자
의심 요소가 있는 그림자box-shadow에게 편리할 것 같아요.
시청해주셔서 감사합니다.