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

CSS3 그림자 효과

· 8년 전 · 2086

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
 

댓글 작성

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

로그인하기

게시글 목록

번호 제목
3229
3228
3227
3226
3225
3224
3223
3222
3221
3220
3219
3218
3217
3216
3215
3214
3213
3212
3211
3210
3209
3208
3207
3206
3205
3204
3203
3202
3201
3200