div盒子鼠标以上有阴影

<div class="hover-shadow">Hover over me!</div>

.hover-shadow {
 width: 200px;
 height: 100px;
 background-color: #f0f0f0;
 margin: 20px;
 text-align: center;
 line-height: 100px; // 使文本垂直居中 
 border: 1px solid #ddd;
 transition: box-shadow 0.3s ease; /* 平滑阴影变化 */
}

.hover-shadow:hover {
// transform: translateY(-2px);  // div沿y轴移动 向上 2个像素
 box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); /* 鼠标悬停时的阴影效果 */
}