box shadow

box Shadow
"> 06-02_box-shadow
box shadow

box Shadow
"> 06-02_box-shadow
box shadow

box Shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06-02_box-shadow</title>
<!--
	# box-shadow
	- 요소에 그림자 효과 지정.
	- box-shadow : offset-x | offset-y | blur-radius | spread-radius | shadow-color | inset
	  > offset-x      : 그림자의 수평거리(필수)
	    offset-y      : 그림자의 수직거리(필수)
	    blur-radius   : 그림자의 흐림 정도
	    spread-radius : 그림자의 크기 확장
	    shadow-color  : 그림자의 색  
	    inset   	  : 그림자를 요소의 안쪽에 생성.
-->
<style type="text/css">

div {
	width: 300px;
	height: 50px;
	margin: 20px;
	padding: 10px;
	background-color: coral;
}

.box_1 { box-shadow: 10px 19px; }
.box_2 { box-shadow: 10px 10px 5px; }
.box_3 { box-shadow: 10px 10px 5px 5px; }
.box_4 { box-shadow: 10px 10px 5px 5px orange; }
.box_5 { box-shadow: 10px 10px 5px 5px orange inset; }

</style>
</head>
<body>
	<h1>box shadow</h1>
	<br>
	<div class="box_1"> box Shadow </div>
	<div class="box_2"> box Shadow </div>
	<div class="box_3"> box Shadow </div>
	<div class="box_4"> box Shadow </div>
	<div class="box_5"> box Shadow </div>
</body>
</html>