웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

box-shadow 본문

css3

box-shadow

jokack01 2013. 10. 2. 15:59

box-shadow : 해당 박스요소에 그림자를 나타낼 수 있게 값을 지정한다.

 

 

  • h-shadow : 필수값. 수평의 그림자 위치를 지정하며 음수값도 허용된다
  • v-shadow : 필수값. 수직의 그림자 위치를 지정하며 음수값도 허용된다
  • Blur : 필수값. 그림자의 흐릿한 정도를 지정spread그림자의 퍼짐 정도를 지정 ( 숫자가 커질수록 상단과 왼쪽 부분에도 그림자가 나타난다. )
  • Color  : 필수값. 그림자의 색상을 지정
  • Inset : 바깥으로 지정된 그림자를 안쪽으로 변경할 수 있는 값 ( 기본적으로 오른쪽과 하단에 생기던 그림자가 박스 내부 그림자로 바뀌면서 상단과 왼쪽으로 생기게 된다. )


ex1) 박스 바깥쪽 그림자 주기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
/* 왼쪽부터의 거리, 위에서부터 떨어지는 거리, 블러값 , 그림자 색상 */
}
</style>
 
</head>
<body>
     
<div>test</div>
  
</body>
</html>

 

 

 ex2) 안쪽 그림자 주기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>box-shadow</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: inset 0px 0px 5px #888888;
}
</style>
</head>
<body>
     
<div>test</div>
  
</body>
</html>

 

'css3' 카테고리의 다른 글

word-wrap  (0) 2013.10.08
text-shadow  (0) 2013.10.08
background  (1) 2013.10.02
border-image  (0) 2013.10.02
border-radius  (0) 2013.10.01
'css3' Related Articles more