CSS 텍스트 그림자
텍스트 그림자
속성 은 text-shadow텍스트에 그림자를 추가합니다.
가장 간단한 사용에서는 가로 그림자(2px)와 세로 그림자(2px)만 지정합니다.
텍스트 그림자 효과!
예시
h1
{
text-shadow: 2px 2px;
}
다음으로 그림자에 색상(빨간색)을 추가합니다.
텍스트 그림자 효과!
예시
h1
{
text-shadow: 2px 2px red;
}
그런 다음 그림자에 흐림 효과(5px)를 추가합니다.
텍스트 그림자 효과!
예시
h1
{
text-shadow: 2px 2px 5px red;
}
더 많은 텍스트 그림자 예제
실시예 1
흰색 텍스트에 텍스트 그림자:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
실시예 2
빨간색 네온 광선이 있는 텍스트 그림자:
h1 {
text-shadow: 0 0 3px #ff0000;
}
실시예 3
빨간색과 파란색 네온 광선이 있는 텍스트 그림자:
h1 {
text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}
실시예 4
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0
0 5px darkblue;
}
팁: CSS 글꼴 장으로 이동하여 글꼴, 텍스트 크기 및 텍스트 스타일을 변경하는 방법에 대해 알아보세요.
팁: CSS 텍스트 효과 장으로 이동하여 다양한 텍스트 효과에 대해 알아보세요.
모든 CSS 텍스트 속성
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-align-last | Specifies how to align the last line of a text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |