如何用2种不同的颜色创建边框底部？

Question

我需要创建两个不同颜色的边框底部，如下面的图片

如何创建css？

thx u

Answer 1

您可以使用css伪类，即:after或:before。

h3 {
  margin: 0;
  padding-bottom: 7px;
  position: relative;
  border-bottom: 2px solid #ccc;
}

h3:before {
  position: absolute;
  background: brown;
  height: 2px;
  content: '';
  width: 50px;
  bottom: -2px;
  left: 0;
}

<h3>Last Recent Post</h3>

你也可以使用css渐变：

h3 {
  margin: 0;
  padding-bottom: 7px;
  position: relative;
}

h3:before {
  position: absolute;
  background: linear-gradient(to right, brown 50px, #ccc 50px);
  height: 2px;
  content: '';
  bottom: 0;
  right: 0;
  left: 0;
}

<h3>Last Recent Post</h3>

Answer 2

将 box-shadow 与零模糊

一起使用

语法： box-shadow：x-offset y-offset模糊半径颜色

示例： box-shadow 0 0 0 1em red，0 0 0 2em orange。

这将模拟1em红色边框的边框，然后是1em橙色边框。

注意橙色的半径为2em（因为它的一半会被红色覆盖）

Answer 3

可接受的解决方案的问题是底部边框的宽度固定为50px;，因此它不考虑文本的长度。更为有效的解决方案如下：

<h2>
  <span>Text length doesn't matter</span>
</h2>

CSS

h2 { 
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: lightgray;
}

span {
 border-bottom-width: 3px;
 border-bottom-style: solid;
 border-bottom-color: brown;
 display: inline-block;
 margin: 0 0 -2px 0;
 padding: 30px 3px;
}

结果将如下所示：JsFiddle链接：http://jsfiddle.net/uyzndpvs/