카테고리 없음
CSS박스쉐도우
by 임숙숙
2025. 3. 14.
<!DOCTYPE html>
<html lang="en">
<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>
.box{
color: #fff;
text-align: center;
line-height: 250px;
width: 250px; height: 250px;
background-color: gray;
margin: 20px;
display: inline-block;
}
.box1{box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);}
.box2{box-shadow: 0 0 20px rgba(0, 157, 255, 0.5)}
.box3{box-shadow: 5px 5px 0 #98ccff;}
.box4{box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);}
.box5{box-shadow: inset 0 0 10px #fff;}
.box6{box-shadow: inset 0 0 100px #000;}
</style>
</head>
<body>
<div class="container">
<div class="box box1">5px 5px 10px rgba(0, 0, 0, 0.4)</div>
<div class="box box2">0 0 20px rgba(0, 157, 255, 0.5)</div>
<div class="box box3">5px 5px 0 #98ccff;</div>
<div class="box box4">inset 0 0 10px rgba(0, 0, 0, 0.4);</div>
<div class="box box5">inset 0 0 10px #fff;</div>
<div class="box box6">inset 0 0 100px #000;</div>
</div>
</body>
</html>