如何用HTML和CSS实现该区块？求尾部灰色背景的实现方案

先看核心的HTML结构，我们可以用一个容器包裹内容，再通过CSS伪元素实现尾部的灰色背景效果：

<div class="card">
  <div class="card-content">
    <p>这里是区块的主要内容，比如文本、按钮等元素</p>
    <button>示例按钮</button>
  </div>
</div>

接下来是CSS样式，重点通过伪元素:after实现尾部灰色背景：

.card {
  width: 300px; /* 自定义宽度 */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden; /* 确保伪元素的圆角和容器一致 */
  background: #fff;
  position: relative;
}

.card-content {
  padding: 16px;
}

/* 实现尾部灰色背景 */
.card:after {
  content: "";
  display: block;
  height: 48px; /* 自定义尾部高度 */
  background-color: #f5f5f5; /* 灰色背景色 */
  width: 100%;
}

另一种直观实现方式（嵌套div） #

如果觉得伪元素不好理解，也可以直接在容器里加一个底部区域的div：

<div class="card">
  <div class="card-content">
    <p>这里是区块的主要内容</p>
    <button>示例按钮</button>
  </div>
  <div class="card-footer"></div>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.card-content {
  padding: 16px;
}

.card-footer {
  height: 48px;
  background-color: #f5f5f5;
}

关键说明 #

• 用overflow: hidden可以让容器的圆角裁剪内部元素（包括伪元素），确保尾部灰色区域的边角和容器整体一致。
• 伪元素方式不需要额外的HTML标签，结构更简洁；嵌套div的方式更直观，适合新手理解。
• 可以根据需求调整尾部的高度、背景色，以及容器的宽度、圆角大小等参数。

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