如何用HTML和CSS为特定区域设置背景色及统一分隔线样式

当前效果：

期望实现中间黄色分隔线的效果：

我用<hr>标签作为两个Grid布局区块的中间分隔线，但颜色不符合需求。希望把区块间空白区域的背景色与Grid区块（背景色为rgb(236,236,236)）统一，也可以采用border方案实现。

当前代码 #

CSS #

.lastpart {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  background-color: rgb(236, 236, 236);
  padding: 10px;
  margin: 10px 10px 10px 10px;
}

.grid-item-cer {
  /* background-color: rgba(255, 255, 255, 0.886);
  border: 1px solid rgba(0, 0, 0, 0.8); */
  padding: 20px;
  font-size: 30px;
}

.certify {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-weight: lighter;
  font-size: 20px;
  padding-bottom: 40px;
}

.spec {
  border-right: 1px solid #d6c08d;
  display: flex;
  /* align-items: center;
  justify-content: center; */
}

.s {
  object-fit: cover;
  object-position: center;
  border: 0;
}

.giaikk {
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family: 'Courier New', Courier, monospace;
  float: right;
  padding-left: 20px;
}

.provekk {
  font-weight: bold;
  color: black;
  font-size: 15px;
  font-family: 'Courier New', Courier, monospace;
  background-color: red;
  padding-top: 30px;
}

.blank {
  margin-right: 20px;
}

.spec2 {
  display: flex;
  /* align-items: center;
  justify-content: center; */
  margin-top: 60px;
}

.s2 {
  border: 1px solid black;
}

.spec3 {
  display: flex;
  /* align-items: center;
  justify-content: center; */
}

.blank2 {
  margin-top: 10px;
}

.line {
  width: 80%;
  margin: 0 auto;
}

HTML #

<body>
  <div class="lastpart">
    <div class="grid-item-cer">
      <h3 class="certify">Chứng Chỉ - Giải Thưởng</h3>
      <div class="spec">
        <img src="s.jpg" class="s" width="150px" height="200px">
        <div class="blank">
          <h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE
            <p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
        </div>
        </h5>
      </div>
    </div>
    
    <div class="grid-item-cer ">
      <div class="spec2">
        <img src="image.png" class="s" width="150px" height="200px">
        <h5 class="giaikk">ĐẠT HUY CHƯƠNG BẠC TOÁN CẤP TỈNH VIOEDU
          <p class="provekk">-Huy chương bạc cấp tỉnh toán cuộc thi toán qua mạng VIOEDU</p>
        </h5>
      </div>
    </div>
  </div>

  <hr class="line">

  <div class="lastpart">
    <div class="grid-item-cer">
      <div class="spec3">
        <img src="2024_2_2_1305289694file01.jpg" class="s3" width="150px" height="200px">
        <div class="blank2">
          <h5 class="giaikk">ĐẠT GIẢI KHUYẾN KHÍCH KHỐI 7 TOÀN QUỐC - IOE
            <p class="provekk">-Chứng chỉ được cấp bỏi Internet Olympiads of English</p>
        </div>
        </h5>
      </div>
    </div>
  </div>
  </div>
</body>

方法一：修改<hr>样式，匹配背景并设置黄色分隔线 #

保留<hr>标签，修改.line类的样式，让<hr>的背景色和Grid区块一致，同时通过渐变实现黄色中间分隔线：

.line {
  width: 80%;
  margin: 0 auto;
  border: none;
  height: 12px; /* 控制空白区域高度 */
  background-color: rgb(236,236,236);
  /* 黄色分隔线居中 */
  background-image: linear-gradient(to right, transparent 40%, #d6c08d 40%, #d6c08d 60%, transparent 60%);
}

方法二：给第一个Grid区块添加底部边框，移除<hr> #

这种方案更贴合布局逻辑，直接让两个区块的背景衔接，中间用边框分隔：

1. 删除HTML中的<hr class="line">标签
2. 添加以下CSS样式：

.lastpart:first-of-type {
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #d6c08d;
}

.lastpart:last-of-type {
  margin-top: 0;
  padding-top: 20px;
}

这样两个区块之间的空白区域会被区块的背景色填充，中间的黄色边框完全匹配你的期望效果。

内容的提问来源于stack exchange，提问作者Duong Duc Dung FX22797