DEVELOPE/CSS

css text-shadow 속성 및 사용

소찾나 2017. 12. 4. 14:45

css text-shadow 속성 및 사용

css text-shadow 속성 및 사용



css3 box-shadow 기능과 같은기능이며 text 의 그림자 효과를 넣을 수 있는 속성이다.


text-shadow 속성은 css3에서 처음 적용된 속성은 아니다 css2에서 추가된 속이이지만


지원하는 브라우저가 거의 없어 많이 사용되지 않던 기능이다.




3 css text-shadow 속성


p { text-shadow: 5px 5px 4px #000; }


text-shadow 의 첫번째 속성값 : 그림자가 가로로 얼마나 떨어져 있는지를 지정함. 양수는 오른쪽 음수는 왼쪽


text-shadow 의 첫번째 속성값 : 그림자가 세로로 얼마나 떨어져 있는지를 지정함 양수값은 글자아래 음수값은 글짜 위


text-shadow 의 세번째 속성값: 그림자의 번지는 정도를 지정


text-shadow 의 네번째 속성값: 그림자의 생상을 지정함  16진수 rgb 또는 색상이름 지정가능




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
<title>html5 css3 radius</title>                                                                  
<style>
p { 
    
    width: 300px;
    height: 300px;
    background-color: #008899;
    font-family: arial black;
    font-size: 50px;
    text-align:center;
    text-shadow:5px 5px 4px #000;
}
 
 
</style>
</head>
</head>
<body>
 
<p>
 
text-shadow
 
</p>
</body>
</html>
cs


text-shadow 샘플작업




이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^