如何实现这种风格的边框？ css只是首选

Question

我正试图获得这样的标题效果：

我想要沿着元素底部的虚线边框，背景颜色与点相同。 我已经尝试过如何设置边框偏移但是没有发现任何适用于我想要实现的外观的东西。我也尝试过使用轮廓，但却发现轮廓属性不能特定于单个边缘。

Answer 1

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

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

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

https://jsfiddle.net/oo31w9x4/

Answer 2

您可以使用box-shadow作为背景。

div {
  color: white;
  box-shadow: inset 1000px 0px red;
  border-bottom: 1px dashed red;
}

<div>the header</div>