Html 如何在网页上得到这样一个盒子？

我正在寻找一种方法，以获得一个像这样的网页框

这实际上是reddit的主题，我想了解如何创建一个不同颜色的盒子，然后再创建一个白色的盒子。我想不出一个术语来形容这个，尽管如此，我仍然在谷歌上搜索“带css的盒子”、“css中的盒子表”等，但没有运气

---

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

高度/宽度可能会超出最终代码所需的范围，但是通过这段代码，您可以了解将边框半径添加到外部

卡

元素的想法，然后将右上角半径和左上角半径边框到内部

卡头

元素，以获得所需的效果

card header

元素上的

display:flex

允许您使用

justify content:space-between

以最少的代码将标题和省略号彼此分开

我添加了一些其他样式，只是为了给颜色、字体样式等带来相同的感觉

.body{
显示：块；
背景：#FAFAFA；
宽度：1000px：
高度：1000px；
填充：25px；
}
.卡片{
背景：#fff；
边界半径：5px；
宽度：300px；
高度：400px；
}
.卡.卡头{
显示器：flex；
证明内容：之间的空间；
颜色：#fff；
字体系列：无衬线；
字体大小：12px；
字体大小：粗体；
字母间距：0.5px；
背景：#4BA2AF；
填充：10px；
边框左上半径：5px；
边框右上角半径：5px；
}

社区详情
…

css边框半径一个边框半径为10px且溢出隐藏的父div，然后一个带有背景的子div，然后是您需要的任何内容