Html 如何实现这种风格的边界？仅css优先

我试图获得如下标题效果：

我想要元素底部的虚线边框，背景颜色与点相同。

---

我试着查找如何设置边界偏移，但没有找到任何适合我试图实现的外观的方法。我也尝试过使用outline，但发现outline属性不能特定于一条边。

在框下方放置一个div，边框样式为虚线：

<div class="box"></div>
<div class="box-border"></div>

.box-border{
    border-bottom:dashed 3px red;
}

.框边{
边框底部：3倍红色虚线；
}

---

您可以使用方框阴影作为背景

div{
颜色：白色；
盒影：嵌入1000px 0px红色；
边框底部：1px红色虚线；
}

---

标题

听起来好像你已经尝试过一些事情，研究过你的问题，但是你把所有努力的成果都抛在了你的问题之外。通过分享您尝试过的内容，您可以大大改进您的问题。首先，您可以使用

边框底部：1px虚线#f00

。将标题HTML和现有CSS添加到您的问题中。我在该图像中没有看到任何点。非常感谢much@dindae不客气。请毫不犹豫地单击复选标记；）