CSS의 상자 그림자 대 그림자

우리는 box-shadow를 사용하여 HTML 요소에 그림자를 추가할 수 있다는 것을 알고 있습니다. 예

.box{
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

그러나 그림자 필터를 사용하여 동일한 결과를 얻을 수 있다는 것을 알고 계셨습니까? drop-shadow 함수에 그림자 값을 전달하기만 하면 됩니다.

.box{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

이 예에서 box-shadow와 drop-shadow는 같은 일을 합니다. 그러나 PNG 이미지에 box-shadow를 추가하면 box-shadow의 모양이 직사각형/상자임을 알 수 있습니다.

img{
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

PNG에 그림자를 추가하면 그림자의 모양이 PNG의 가시 영역 모양과 동일합니다.

img{
    filter: drop-shadow(2px 3px 10px rgba(0, 0, 0, .5));
}

내 다른 기사와 YouTube 채널을 확인하십시오.


.ltag__user__id__728097 .follow-action-button {
배경색: #000000 !중요;
색상: #ffffff !중요;
테두리 색상: #000000 !중요;
}

팔로우

Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace




너비="710"

높이="399"

src="https://www.youtube.com/embed/rfZQ-nlxlqo"

전체 화면 허용

로딩="게으름">

도움이 되었나요? Patreon에서 저를 지원하십시오