개발/css

text-shadow의 인자값을 알아보자

개강한 공대생 2024. 9. 12. 20:43

text-shadow: 2px 2px 5px red;

다음과 같은 text-shadow 코드가 있다고 해보자

 

첫번째 2px은 그림자의 X축 오프셋이다. 텍스트를 기준으로 가로 방향으로 그림자가 얼마나 이동할지를 결정한다.

양수면 오른쪽으로, 음수면 왼쪽으로 그림자가 이동한다.

 

두번째 2px은 그림자의 Y축 오프셋이다. 양수면 아래로, 음수면 위로 그림자가 이동한다.

 

세번째 5px은 그림자의 블러 반경이다. 이 값이 클수록 그림자가 흐릿해진다.

 

네번째값인 red는 그림자의 색상이다.