Study/CSS3
[CSS3] text-shadow
taecongs
2023. 9. 5. 11:06

알고있으면 좋은 CSS3 Tip✨
text-shadow
- text-shadow는 글자에 그림자 효과를 주는 속성이다.
- text-shadow 와 box-shadow는 비슷하게 작성하기 때문에 자주 사용하지는 않지만 알아두면 좋다.
// (1) text-shadow 속성
text-shadow : x축 y축 blur color;
// (2) text-shadow 예제
text-shadow : 5px -5px 0 #e00012; // 글자 오른쪽과 위쪽에 빨강색 그림자넣기
text-shadow : -3px 3px 0 #e00012; // 글자 왼쪽과 아래쪽에 빨강색 그림자 넣기
- x축 : 왼쪽(음수)과 오른쪽(양수)에 그림자 효과를 적용한다.
- y축 : 위쪽(음수)과 아래쪽(양수)에 그림자 효과를 적용한다.
- blur : 그림자에 번짐 효과를 주며, 크기가 커질수록 흐릿하게 번짐효과가 적용된다.
- color : 그림자에 색을 부여한다.