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

时间:2016-07-01 05:09:59

标签: css css3 styles border underline

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

enter image description here

如何创建css?

thx u

3 个答案:

答案 0 :(得分:7)

您可以使用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>

答案 1 :(得分:0)

box-shadow 零模糊

一起使用

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

示例: box-shadow 0 0 0 1em red,0 0 0 2em orange。

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

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

答案 2 :(得分:0)

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