如何在网页上找到这样的盒子？

Question

正在寻找一种方法来在网页Image here上获得这样的盒子

这实际上是reddit的主题，我想了解如何创建具有不同颜色的类似框，然后再将其粘贴成白色框。我不能为此给谷歌一个术语，尽管如此，我仍然用谷歌搜索“带有CSS的盒子”，“带有CSS的盒子表”之类的东西，但是没有运气。

这叫什么以及如何精确地做到这一点？

Answer 1

高度/宽度可能会因您最终代码的需要而有所不同，但是通过此代码段，您可以将边界半径添加到外部card元素，然后在border-top-right-半径和border-top-left-radius到内部card-header元素，以获得所需的效果。

display: flex元素上的card-header允许您使用justify-content: space-between以最少的代码将标题和省略号推开。

[我添加了其他样式以提供相同的颜色，字体样式等。

.body {
  display: block;
  background: #FAFAFA;
  width: 1000px:
  height: 1000px;
  padding: 25px;
}

.card {
  background: #fff;
  border-radius: 5px;
  width: 300px;
  height: 400px;
}

.card .card-header {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-family: sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.5px;
  background: #4BA2AF;
  padding: 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

<div class="body">
  <div class="card">
    <div class="card-header">
      <span class="title">COMMUNITY DETAILS</span>
      <span class="ellipsis">…</span>
    </div>
  </div>
</div>