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

【问题标题】：How to create border bottom with 2 different color?如何创建具有 2 种不同颜色的边框底部？
【发布时间】：2016-11-03 09:32:15
【问题描述】：

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

如何创建 CSS？

【问题讨论】：

使用linear-gradient 作为边框或背景图像（或）在顶部放置一个较小尺寸的伪元素。这个帖子应该有帮助 - stackoverflow.com/questions/32781360/…（虽然它有更多颜色）

标签： css styles border underline

【解决方案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;
}

&lt;h3&gt;Last Recent Post&lt;/h3&gt;

你也可以使用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;
}

&lt;h3&gt;Last Recent Post&lt;/h3&gt;

【讨论】：

如果有人希望下划线的宽度与“Last Recent Post”字样一样宽，只需添加行“display: inline-block;”对“h3”的定义
很好的解决方案。我只使用了两行代码来满足我的需要，将底部边框分成两半。

【解决方案2】：

已接受解决方案的问题是底部边框的固定宽度为 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/

【讨论】：

【解决方案3】：

使用 box-shadow 和 零模糊

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

例子： box-shadow 0 0 0 1em red , 0 0 0 2em orange.

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

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

【讨论】：