页面会显示一个盒子模型（使用 div 创建）。 盒子模型的背景颜色为 #CAF7E3。 盒子模型的边框粗细为 20px，实线。 盒子模型边框的四条边颜色和样式不同，样式和颜色请自定义。

当创建一个页面上的盒子模型使用 HTML 的 `div` 元素时，你可以通过 CSS 来设置其属性。首先，我会为你展示如何构建基础的样式：

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

然后，在 CSS 中添加样式：

.box-model {
  background-color: #CAF7E3; /* 背景颜色 */
  border-width: 20px; /* 边框粗细 */
  border-style: solid; /* 实线边框 */
}

/* 自定义边框颜色和样式 */
.box-model:before,
.box-model:after {
  content: "";
  display: block;
  width: 20px; /* 等于边框宽度，确保两边留有空间 */
}

.box-model:before {
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 20px solid red; /* 左上角颜色 */
}
.box-model:after {
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid green; /* 右下角颜色 */
}

/* 上下两条边 */
.box-model:hover {
  border-top-color: blue; /* 鼠标悬停时上边框颜色 */
  border-bottom-color: orange; /* 鼠标悬停时下边框颜色 */
}

在这个例子中，我们设置了四个方向的边框，分别用伪元素 `:before` 和 `:after` 控制左上、右上、右下和左下的颜色。默认情况下，边框颜色是红色和绿色，而当鼠标悬停在`div`上时，上边框变为蓝色，下边框变为橙色。