请求提供实现如图样式的CSS多边框代码方案

以下是实现图中带圆角边框、阴影，且包含标题栏与内容区的容器样式代码：

HTML结构 #

<div class="card-container">
  <div class="card-header">标题</div>
  <div class="card-content">这里是内容区域，可添加文本或其他元素</div>
</div>

CSS样式 #

/* 外层容器 */
.card-container {
  width: 300px; /* 可按需修改宽度 */
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 确保内部元素不超出圆角 */
}

/* 顶部标题栏 */
.card-header {
  background-color: #f3f4f6;
  padding: 12px 16px;
  font-weight: 500;
  color: #374151;
}

/* 底部内容区 */
.card-content {
  padding: 16px;
  background-color: #fff;
  color: #111827;
}

你可以根据实际需求调整宽度、颜色值、内边距等参数，来精准匹配图中的样式细节。

内容的提问来源于stack exchange，提问作者Phong Thai