是否可以模仿CSS脊线边框,但使用自定义颜色?

您的示例似乎建议您创建一条脊线作为头和其余部分之间的分隔符,而不是元素周围的脊线边界。你为什么不用 hr 因为这正是它的目的?

然后你可以给它一个边框,在不同的边上设置你自己的颜色。

不符合CSS 3规范(第8.5.3节):

为值绘制的边框颜色 “凹槽”、“脊”、“嵌入”和 “开始”取决于元素的 边框颜色属性,但UAS可以 选择自己的算法 计算实际使用的颜色。

从技术上讲,我认为“选择他们自己的算法”可能涉及允许开发人员设置它们,但此时似乎没有用户代理这样做。当然,即使他们这样做了,您也只有一个渲染引擎的解决方案。

没有正式的方法可以做到这一点,但你可能会模仿这种效果。脊状边框实际上只是一个插入边框,它本身周围有一个起始边框(反过来,它只是一个纯色边框,左/上/下/右的边框颜色略有不同)。

沿着这些线的某些东西应该能让你得到一个你想要的,或者你正在寻找的东西的非常好的近似值。

 .inset{
      margin:0px;
      border: 1px inset #abc;
 }
 .outset{
      padding:0px;
      border:1px outset #cba;
 }

<div class='outset'>
     <div class='inset'>
          content goes here
     </div>
</div>

<style>
.a
{
        border: solid yellow 2px;
        border-top-color:red;
        border-left-color:red;

}
.b
{
        border: solid red 2px;
        border-top-color:yellow;
        border-left-color:yellow;
}
</style>
<div class='a'>
  <div class='b'>
        some text
  </div>
</div>