在HTML5中，div元素是一个非常灵活的容器，可以用来布局页面中的不同部分。通过CSS，我们可以轻松地为div元素添加背景色和阴影效果，从而让页面看起来更加生动和吸引人。以下是如何使用HTML和CSS来实现这一效果的详细步骤。

1. 添加背景色

要为div元素添加背景色，可以使用CSS的background-color属性。这个属性接受任何有效的颜色值，包括颜色名称、十六进制代码、RGB值等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景色示例</title>
<style>
  .background-color-example {
    width: 300px;
    height: 200px;
    background-color: #3498db; /* 蓝色背景 */
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
</head>
<body>
<div class="background-color-example">这是一个有背景色的div元素。</div>
</body>
</html>

在上面的例子中，我们创建了一个div元素，并给它设置了蓝色背景。

2. 添加阴影效果

CSS的box-shadow属性可以用来为div元素添加阴影效果。这个属性允许你指定水平偏移、垂直偏移、模糊半径和阴影颜色。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阴影效果示例</title>
<style>
  .shadow-example {
    width: 300px;
    height: 200px;
    background-color: #3498db; /* 蓝色背景 */
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 10px 10px 15px rgba(0,0,0,0.5); /* 添加阴影 */
  }
</style>
</head>
<body>
<div class="shadow-example">这是一个有阴影效果的div元素。</div>
</body>
</html>

在这个例子中，我们为div元素添加了一个阴影效果，其中水平偏移为10px，垂直偏移为10px，模糊半径为15px，阴影颜色为半透明的黑色。

3. 组合使用背景色和阴影

你可以在同一个div元素上同时使用background-color和box-shadow属性，以创建更加丰富的视觉效果。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景色与阴影组合示例</title>
<style>
  .combined-example {
    width: 300px;
    height: 200px;
    background-color: #e74c3c; /* 红色背景 */
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3); /* 添加阴影 */
  }
</style>
</head>
<body>
<div class="combined-example">这是一个有背景色和阴影效果的div元素。</div>
</body>
</html>

在这个例子中，我们为div元素设置了红色背景和轻微的阴影效果。

通过以上步骤，你可以轻松地为HTML5中的div元素添加背景色和阴影效果，让你的页面更加生动和具有吸引力。