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

Question

我需要创建两种不同颜色的边框底部，如下图所示

如何创建 CSS？

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 红色，0 0 0 2em 橙色。

这将模拟 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 link：http://jsfiddle.net/uyzndpvs/

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

How to create border bottom with 2 different color?

css

styles

border

underline