CSS 그림자 효과
- 이전 페이지 CSS 원형 기울기
- 다음 페이지 CSS box-shadow
Shadows
CSS로 그림자 효과를 만들어보세요！
위에서 마우스를 올려다보세요！
CSS 그림자 효과
CSS를 사용하여 텍스트와 요소에 그림자를 추가할 수 있습니다。
이 튜토리얼에서는 다음과 같은 속성을 배웁니다：
text-shadowbox-shadow
CSS 글자 그림자
CSS text-shadow 속성이 텍스트에 그림자를 추가합니다。
가장 간단한 사용법은 수평 그림자(2px)와 수직 그림자(2px)만 지정하는 것입니다：
텍스트 그림자 효과!
예제
h1 {
text-shadow: 2px 2px;
}
그런 다음, 그림자에 색상을 추가하세요：
텍스트 그림자 효과!
예제
h1 {
text-shadow: 2px 2px red;
}
그런 다음, 그림자에 흐림 효과를 추가하세요：
텍스트 그림자 효과!
예제
h1 {
text-shadow: 2px 2px 5px red;
}
다음 예제에서는 검은색 그림자를 가진 흰색 텍스트를 보여줍니다：
텍스트 그림자 효과!
예제
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
다음 예제에서는 빨간색의 레이저 발광 그림자를 보여줍니다：
텍스트 그림자 효과!
예제
h1 {
text-shadow: 0 0 3px #FF0000;
}
여러 그림자
문자에 여러 그림자를 추가하려면 쉼표로 구분된 그림자 목록을 추가할 수 있습니다。
다음 예제에서는 빨간색과 파란색의 레이저 발광 그림자를 보여줍니다：
텍스트 그림자 효과!
예제
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
아래의 예제는 검은색, 파란색 및 검은색 그림자를 가진 흰색 텍스트를 보여줍니다：
텍스트 그림자 효과!
예제
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
text-shadow 속성을 사용하여 텍스트 주위에 단순한 경계선(그림자 없음)을 생성할 수 있습니다.:
텍스트를 둘러싼 경계선!
예제
h1 {
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
- 이전 페이지 CSS 원형 기울기
- 다음 페이지 CSS box-shadow
