用css给盒子:hover后加上阴影效果

可以使用 CSS 的 `:hover` 伪类选择器来为鼠标悬停时的盒子添加阴影效果。当鼠标悬停在盒子上时，使用 `box-shadow` 属性给盒子添加阴影即可。

下面是一个示例代码，实现了鼠标悬停时给盒子添加阴影效果：

<div class="box"></div>

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 10px;
  transition: box-shadow 0.3s ease-in-out;
}

.box:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

以上代码中，`transition` 属性用来设置 `box-shadow` 属性的过渡效果，使得添加和删除阴影时有一个缓慢的过渡，从而使效果更加平滑。当鼠标悬停在盒子上时，使用 `box-shadow` 属性添加一个模糊半径为 10px、颜色为黑色、透明度为 0.2 的阴影，从而实现了鼠标悬停时给盒子添加阴影效果。

相关问题

白色盒子阴影透明css

要给白色盒子添加透明的阴影效果，可以使用以下CSS代码：
.box:hover {
box-shadow: 0 16px 32px 0 rgba(255, 255, 255, 0.5);
}
其中，box-shadow属性用来设置盒子的阴影效果。rgba(255, 255, 255, 0.5)表示白色阴影，并设置了透明度为0.5。你可以根据需要调整透明度值来实现不同的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [css简单实现div鼠标悬浮后出现阴影](https://blog.csdn.net/weixin_45719052/article/details/125171612)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [CSS再学习（如何设置背景图片透明，弹性盒子，盒子阴影）+HTML冷门知识](https://blog.csdn.net/qq_53679247/article/details/127328244)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]