div 元素中的两种颜色答案

【问题标题】：Two colors in a div elementdiv 元素中的两种颜色
【发布时间】：2022-12-13 08:34:53
【问题描述】：

我正在尝试用两种颜色为 div 元素着色。我想要标题的颜色不同于正文的颜色。主体的颜色类别为蓝色或绿色（取决于用例 - 角度 html 代码）。

我的问题：如果我定义 background-color: x 为类标题，那么就会有一个不适合父级边框的矩形。任何想法如何解决？

HTML:

<div class="parent (+ class blue or green - depends on use case)">
<div class="header">
</div>
<div class="body">
</div>
</div>

CSS：

  .parent{
      border-radius: 20px;
      padding: 12px;
      overflow-wrap: break-word;
    
      .date {
        font-size: 13px;
      }
    }

.blue{
  background-color: darkslateblue;
  box-shadow: 0 2px 3px rgb(52, 41, 119);
}

.green{
  background-color: darkolivegreen;
  box-shadow: 0 2px 3px rgb(100, 120, 60);
}

【问题讨论】：

标签： html css sass

【解决方案1】：

.parent {
  border-radius: 20px;
  background: olive;
  overflow: hidden;
  color: white;
}

.header {
  background: red;
  padding: 20px;
  font-weight: bold;
}

.body {
  padding: 20px;
}

<div class="parent">
  <div class="header">The Header</div>
  <div class="body"> The body content</div>
</div>

【讨论】：