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

正在寻找一种在网页Image here上获取类似框的方法

这实际上是reddit的主题，我想了解如何创建这样一个具有不同颜色的盒子，然后再创建一个白色的盒子。尽管如此，我无法提出一个关于Google的术语，但是我仍然在搜索诸如“带有CSS的盒子”，“ CSS中的盒子表”之类的东西，但是没有运气。

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

最佳答案

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

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>