<!DOCTYPE html>
<html>
<head>
<title>div 박스에 그림자 만들기</title>
<style>
.redBox {
box-shadow : 10px 10px red;
}
.blurBox {
box-shadow : 10px 10px 5px skyBlue;
}
.multiEffect {
box-shadow : 2px 2px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
.blackBox {
box-shadow : 10px 10px 20px black ;
}
div {
width : 150px;
height : 70px;
padding : 10px;
border : 10px solid lightgray;
background-image : url("media/spongebob.png");
background-size : 150px 100px;
background-repeat : no-repeat;
}
</style>
</head>
<body>
<h3> 박스 그림자 만들기 </h3>
<hr>
<div class="redBox">뚱이와 함께</div><br>
<div class="blurBox">뚱이와 함께</div><br>
<div class="multiEffect">뚱이와 함께</div><br>
<div class="blackBox">뚱이와 함께</div><br>
</body>
</html>
댓글 없음:
댓글 쓰기