CSS Shadow (그림자 효과)

텍스트나 요소에 그림자 효과를 부여하기 위한 프로퍼티를 선언한다.

 

1. text-shadow

텍스트에 그림자 효과를 부여하는 프로퍼티이다.

선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; }

- Horizontal-offset (단위: px) : 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다 (필수값)
- Vertical-offset (단위: px) : 그림자를 텍스트의 아래로 지정값만큼 이동시킨다 (필수값)
- Blur-radius (단위: px) : 그림자의 흐림정도를 지정한다 (생략 가능)
- Shadow-color (단위: color) : 그림자의 색상을 지정한다 (생략 가능)

 

2. box-shadow

요소에 그림자 효과를 부여하는 프로퍼티이다.

선택자 { box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; }

- Inset (단위:inset) : inset 키워드를 지정하면 그림자가 요소 안쪽에 위치한다. (생략 가능)
- Horizontal-offset (단위: px) : 그림자를 텍스트의 오른쪽으로 지정값만큼 이동시킨다 (필수값)
- Vertical-offset (단위: px) : 그림자를 텍스트의 아래로 지정값만큼 이동시킨다 (필수값)
- Blur-radius (단위: px) : 그림자의 흐림정도를 지정한다 (생략 가능)
- Spread (단위: px) : 그림자를 더 크게 확장시킨다 (음/양수)
- Shadow-color (단위: color) : 그림자의 색상을 지정한다 (생략 가능)

 

 

 

* 이 글은 poiemaweb의 콘텐츠를 필사한 글입니다.

출처:

https://poiemaweb.com/css3-shadow