grammar
box-shadow: h-shadow v-shadow blur spread color inset;
In fact, you can press f12 yourself and adjust the parameters to see which one is more appropriate.
- The default is outer shadow (outset), but you cannot write this word, otherwise the shadow will be invalid
- Box shadows do not take up space and will not affect the arrangement of other boxes.
Instance
The pink block will be shaded when the mouse passes over it:
<!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>