테스트 사이트 - 개발 중인 베타 버전입니다

CSS3 그림자 효과

· 8년 전 · 2084

CSS3 그림자 효과


CSS3를 사용하면 텍스트와 요소에 그림자를 추가 할 수 있습니다.


이 장에서는 다음 속성에 대해 학습합니다.


1. text-shadow

2. box-shadow


6bdffa54a1ef08d61b8f06ccafeca4d2_1502434
 

CSS3 text-shadow속성은 텍스트에 그림자를 적용합니다.

가장 간단한 방법은 수평 그림자 (2px)와 수직 그림자 (2px) 만 지정하는 것입니다.

예)
h1 {
    text-shadow: 2px 2px;
}

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>

</body>
</html>

6bdffa54a1ef08d61b8f06ccafeca4d2_1502434
 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3199
3198
3197
3196
3195
3194
3192
3191
3190
3189
3188
3187
3186
3185
3184
3183
3182
3181
3180
3179
3178
3177
3176
3175
3174
3173
3172
3171
3170
3169