在网页设计中，阴影（Shadow） 和 悬浮效果（Hover Effect） 是提升交互体验和视觉层次感的重要手段。本文将详细介绍如何使用 HTML 和 CSS 为 <div> 元素添加 阴影效果 ，并结合 悬浮（Hover） 状态实现动态边框和阴影变化，让你的网页元素更加生动！
1. 基础：为 Div 添加静态阴影
1.1 使用 box-shadow 属性
box-shadow 是 CSS 中用于添加阴影的核心属性，语法如下：
css
box-shadow: h-offset v-offset blur spread color inset;h-offset：水平偏移（正值向右，负值向左）v-offset：垂直偏移（正值向下，负值向上）blur：模糊半径（值越大越模糊）spread：扩散半径（正值扩大阴影，负值缩小阴影）color：阴影颜色（支持HEX、RGB、RGBA）inset（可选）：内阴影（默认是外阴影）
示例：基础阴影
html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: #3498db;
margin: 50px;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>2. 进阶：悬浮时改变阴影和边框
2.1 使用 :hover 伪类实现交互效果
hover 伪类可以让元素在鼠标悬停时改变样式，常用于按钮、卡片等交互元素。
示例：悬浮时阴影变大
html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: #3498db;
margin: 50px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease; /* 添加过渡效果，使变化更平滑 */
}
.box:hover {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4); /* 悬浮时阴影变大 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>2.2 悬浮时添加边框
除了阴影，我们还可以在悬浮时添加 边框（border） 或改变边框颜色，增强交互感。
示例：悬浮时显示边框
html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: #3498db;
margin: 50px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease; /* 统一过渡效果 */
border: 2px solid transparent; /* 默认透明边框 */
}
.box:hover {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);
border: 2px solid #e74c3c; /* 悬浮时显示红色边框 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>3. 高级：组合多种效果
3.1 内阴影 + 外阴影组合
我们可以同时使用 外阴影（默认） 和 内阴影（inset） 来创建更复杂的视觉效果。
示例：悬浮时内阴影 + 外阴影
html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background: #3498db;
margin: 50px;
box-shadow:
5px 5px 10px rgba(0, 0, 0, 0.2), /* 外阴影 */
inset 0 0 10px rgba(255, 255, 255, 0.5); /* 内阴影（白色高光） */
transition: all 0.3s ease;
}
.box:hover {
box-shadow:
10px 10px 20px rgba(0, 0, 0, 0.4), /* 悬浮时外阴影变大 */
inset 0 0 15px rgba(255, 255, 255, 0.8); /* 悬浮时内阴影更明显 */
border: 2px solid #e74c3c; /* 悬浮时显示边框 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果 ：
3.2 3D 立体悬浮效果
通过调整 box-shadow 的偏移和模糊，可以模拟 3D 立体效果，让元素看起来像浮在页面上。
示例：3D 悬浮按钮
html
<!DOCTYPE html>
<html>
<head>
<style>
.button {
width: 150px;
height: 50px;
background: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 5px 0 #2980b9; /* 底部阴影模拟 3D 效果 */
transition: all 0.1s ease;
}
.button:hover {
transform: translateY(-2px); /* 轻微上浮 */
box-shadow: 0 7px 0 #2980b9; /* 阴影变大，增强 3D 感 */
}
.button:active {
transform: translateY(2px); /* 点击时下沉 */
box-shadow: 0 3px 0 #2980b9; /* 阴影变小 */
}
</style>
</head>
<body>
<button class="button">点击我</button>
</body>
</html>效果 ：
4. 总结
| 效果 | 代码示例 | 适用场景 |
|---|---|---|
| 基础阴影 | box-shadow: 5px 5px 10px rgba(0,0,0,0.2); |
卡片、按钮、图片 |
| 悬浮阴影变化 | :hover { box-shadow: 10px 10px 20px rgba(0,0,0,0.4); } |
交互式元素 |
| 悬浮边框 | :hover { border: 2px solid #e74c3c; } |
按钮、卡片高亮 |
| 组合阴影 | box-shadow: 5px 5px 10px rgba(0,0,0,0.2), inset 0 0 10px rgba(255,255,255,0.5); |
高级 UI 设计 |
| 3D 效果 | box-shadow: 0 5px 0 #2980b9; + transform: translateY(-2px); |
按钮、悬浮菜单 |
5. 扩展阅读
希望本文能帮助你掌握 Div 阴影悬浮边框 的设置方法，让你的网页更加生动！ 🚀 如果有任何问题，欢迎在评论区交流！ 😊