DEVELOPE/CSS

css box-shadow 속성

소찾나 2017. 12. 2. 11:47

css box-shadow 속성

css box-shadow 속성



이미지나 글자에 그림자 효과를 넣기 위해서는 이미지 편집 프로그램을 사용하여 이미지에 그림자를 넣어야 하였지만


css3에서는 간단한 속성만으로 그림자 효과를 낼 수 있어 손쉽게 작업을 진행 할 수 있다.


css3 에서는 그림자 속성인 box-shadow 속성에 대하여 알아보도록 하자.





1 box-shadow 속성


css3 의  box-shadow 속성을 사용하면 포토샵이라 기타 이미지 편집 프로그램을 사용하지 않고도 간단하게 속성 추가만으로 그림자 


효과를 낼 수 있다. 그리고 속성 값에 따라 그림자의 위치나 생상 기울기 정도를 조절할 수 있다.


box-shadow 속성은 모두 4개의 값을 가질 수 있으며 최소 3개의 속성값을 지정하여야 한다.


box-shadow : 5px -5px 10px #000


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
32
33
<!DOCTYPE html>
<html>
<head>
<title>html5 css3 radius</title>                                                                  
<style>
.box-shadow-test { 
    
     width:200px;
     height:200px;
     background-color:#777;
     line-height: 20px;
     color:#ffffff;
     text-align:center;
     padding: 10px;
     border-radius: 20px;
     box-shadow : 5px -5px 10px #000;
}
 
 
</style>
</head>
</head>
<body>
 
<div class="box-shadow-test">
 
box-shadow 테스트하기
 
</div>
</body>
</html>
cs






box-shadow 속성값 첫번째: 그림자의 가로를 얼마나 떨어지게 하는지를 지정하게됨, 양수값은 오른쪽 음수값은 왼쪽


box-shadow 속성값 두번째: 그림자의 세로가 얼마나 떨어지게 하는지를 지정하게됨, 양수값은 아래쪽 음수값은 위쪽


box-shadow 속성값 세번째: 그림자가 번지는 정도를 나타내게됨, 0이 최소값으로 0으로 하게되면 번지는 효과를 사용하지 않게됨


box-shadow 속성값 네번째: 그림자의 색상값을 지정함 , 16진수의 생상값을 사용 할 수 있다. 생상이름이나 RGB 값 모두 사용가능



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