[css] drop-shadow VS box-shadow

box-shadow

일반적으로 box-shadow를 많이 씁니다.

box-shadow: [inset] <horizontal> <vertical> <blur-radius> [spread-radius] <color> 

위에서 <>는 필수값 []는 옵션값입니다.
안쪽으로 값을 주기 위해서 inset을 붙일 수도 있습니다.

drop-shadow

box-shadow와 달리, 사각형 box가 아닌 여러가지 형태에 대해서 shadow를 줄 수 있습니다.
예를 들면 icon같은 곳에 shadow를 만들 수 있습니다.

filter: drop-shadow(<offset-x> <offset-y> [blur-radius] [color])

위에서 <>는 필수값 []는 옵션값입니다.

• blur 값이 옵션입니다.
• color 값이 옵션입니다. color를 명시하지 않는 경우, color property값에 의해 설정됩니다.
• drop-shadow는 spread 값이 없습니다. (단점)

예시

아이콘에 drop-shadow와 box-shadow를 적용해서 비교해봅니다.

왼쪽

    font-size: 50px;
    filter: drop-shadow(2px 4px 6px black);

오른쪽

    font-size: 50px;
    box-shadow: 2px 4px 6px black;