如何为独立游戏条目<hr>上方区域设置差异化背景色？

要实现每个游戏条目里<hr>上方的标题和标签区域背景色更浅，同时保留现有盒子的圆角形状，你可以按照以下步骤修改代码：

1. 调整HTML结构 #

给每个<article>里的标题和标签添加一个容器包裹，这样能统一控制这个区域的背景样式：

<article>
  <div class="game-header">
    <h2>Hollow Knight</h2>
    <p class="tags">Difficult, Souls-like</p>
  </div>
  <hr>
  <p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
  <img src="hollow-knight.png">
</article>

注意：需要给所有游戏条目都套用这个结构。

2. 修改CSS样式 #

添加新容器的样式，同时修正原代码里缺少单位的问题：

body {
    margin: 0;
    padding-top: 150px; /* 补充px单位 */
    padding-bottom: 0;
}

article {
    background-color: #67aa69;
    text-align: center;
    width: 30%;
    padding: 2px; /* 补充px单位 */
    position: relative;
    border-radius: 10%;
    overflow: hidden; /* 确保内部容器圆角与条目对齐 */
}

/* 新增标题标签区域样式 */
.game-header {
    background-color: #82c485; /* 比article背景浅的绿色，可自行调整 */
    padding: 8px 2px;
    border-top-left-radius: 10%; /* 和article顶部圆角匹配 */
    border-top-right-radius: 10%;
}

/* 可选：优化分隔线样式 */
hr {
    border: none;
    height: 1px;
    background-color: #589c5b;
    margin: 0;
}

为什么之前的方法无效？ #

直接给<h2>或.tags设置背景色，只会让色块包裹文字本身，所以会出现贯穿屏幕的线条。用容器包裹后，背景色会填充整个条目顶部的区域，再通过圆角设置和overflow: hidden，就能完美贴合现有盒子的形状。

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