DIV边框底色属性两种颜色

Question

我有一个div，其中包含一个站点标题。 div有一个border-bottom-color: #ff6600;，它创建一条横跨div宽度的橙色线。我想看看是否可以在border-bottom-color属性上设置一个开始/结束点，因此它的外观开始和结束从div的远边缘缩进？

Here is a screenshot of what I'm looking for：

Answer 1

您可以使用伪元素而不是边框​​。

div{
  width: 100px;
  height: 40px;
  background: lightgrey;
  position: relative;
}

div:after{
  content: '';
  display: block;
  width: 90%;
  height: 1px;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -45%;
  background: orange;
}

<div></div>

Answer 2

你可以通过在div中添加div来实现。没有边框的第一个div和带边框的内部div。示例

<div style="width:200px;height:100px; border-left:1px solid #000000;border-right:1px solid #000000;border-top:1px solid #000000;border-bottom:0px solid #000000; margin-left:10px;margin-right:10px;">


    <div style="width:180px;height:100px; border-left:0px solid #000000;border-right:0px solid #000000;border-top:0px solid #000000;border-bottom:1px solid red; margin-left:10px;margin-right:10px;"></div>


</div>

我为你创建了一个演示小提琴

https://jsfiddle.net/wgrLfxg3/9/