<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 그림자</title>
<style>
.halla {
/*display:block; 박스의 유형을 블록형 박스로 변경*/
width:300px; height:199px;
background:url(imgs/halla.jpg);
border:3px solid #FFF;
box-shadow:5px 5px 10px #333, inset 5px 5px 10px #999;
}
.halla:hover { /* halla 박스에 마우스 오버 했을 때 */
box-shadow:none; /*박스 그림자를 제거*/
}
</style>
</head>
<body>
<div class="halla"></div>
<img src="imgs/cloud.jpg">
</body>
</html>
결과
