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

Question

我本质上希望有一个“山脊”样式的边框，但具有自定义颜色。使用 border-style: ridge 似乎您无法放入不同的颜色，浏览器仅使用比指定颜色稍浅的一种颜色和一种稍深的颜色。

我当前的解决方案是这样的，但由于额外的

，它并不理想。

<div id="header">
  <!-- block with border-bottom set to `1px solid #2e3436`-->
</div>
<div style="height: 1px; background-color: #fbe995;"></div>

下面的下一项不能将其顶部边框设置为该颜色（它有自己的样式并且是单独的） ），所以这个想法就消失了。还有什么我可以尝试的吗？

Answer 1

不符合 CSS 3 规范（第 8.5.3 节）：

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

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

Answer 2

您的示例似乎表明您想要创建一条脊线作为标题和其余部分之间的分隔符，而不是元素周围的脊状边框。为什么不使用 hr 来实现这一点，因为这正是它的用途呢？

然后您可以给它一个边框并在不同的侧面设置您自己的颜色。

Answer 3

没有官方方法可以做到这一点，但您可以模仿效果。脊状边框实际上只是一个插入边框，它本身周围有一个起始边框（反过来，它只是一个实心边框，左/上和下/右的边框颜色略有不同）。

按照这些思路，您应该可以很好地近似您想要的东西，或者正是您正在寻找的东西。

 .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>

Answer 4

<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>