문법
box-shadow: h-shadow v-shadow blur spread color inset;
실제로 f12 키를 직접 누르고 매개 변수를 조정하여 어느 것이 더 적합한 지 확인할 수 있습니다.
- 기본값은 외부 그림자 (아웃 셋)이지만이 단어를 쓸 수 없습니다. 그렇지 않으면 그림자가 유효하지 않습니다.
- 상자 그림자는 공간을 차지하지 않으며 다른 상자의 배열에 영향을주지 않습니다.
예
분홍색 블록은 마우스가 그 위로 지나갈 때 음영 처리됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
}
.box:hover {
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}
</style>
<body>
<div class="box"></div>
</body>
</html>