Question

我创建了一个多色边框，但此刻它出现在右上角而不是我的文字下面。我希望它在文本下方，就像文本下划线一样。

如果我删除浮动：右边然后它会转到文本，但会出现在文本的两侧而不是下面。

＆＃13;

h1.title-v2.title-center, h2.title-v2.title-center, h3.title-v2.title-center {
    text-align: center;
}

h2.title-v2 {
    color: #555;
    position: relative;
    margin-bottom: 30px;
}

h1, h2, h3, h4, h5, h6 {
    color: #555;
    margin-top: 5px;
    text-shadow: none;
    font-weight: normal;
    font-family: Roboto;
}

h2 {
    font-size: 24px;
    line-height: 33px;
  }
  
  h2.title-v2.title-center:before, [dir=rt1] h2.title-v2.title-center:after {
    border-right: #F4A613 15px solid;
    border-left: #B0c335 15px solid;
}
h2.title-v2:before {
    left: 0;
    width: 45px;
    height: 4px;
    content: " ";
    bottom: -10px;
    float: right;
    background: #007DC5;
}
h2.title-v2.title-center:after, [dir=rt1] h2.title-v2.title-center:before {
    left: 50%;
    border-right: #56144A 15px solid;
    border-left: #C62428 15px solid;
}
h2.title-v2:after {
    left: 0px;
    width: 29px;
    height: 4px;
    content: " ";
    float: right;
    }

＆＃13;

<h2 class="title-v2 title-center">News</h2>

＆＃13;

Answer 1

我假设你从这个问题中采用了:: before / :: after之后的想法： How to create multi-color border in css3

他们的解决方案在div上方添加了一个多色边框，使用this :: after伪元素 -

.yourDiv::after {
  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  position: absolute; 
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}

将'top:0'部分更改为'bottom:0'会将边框放在div的底部。

在这里看到工作小提琴： https://jsfiddle.net/rrupuL99/

希望有所帮助

Answer 2

您可以使用linear-gradient来解决问题。更容易看到以下示例：

h1.title-v2.title-center, h2.title-v2.title-center, h3.title-v2.title-center {
  text-align: center;
}
h2.title-v2 {
  color: #555;
  position: relative;
  margin-bottom: 30px;
}
h1, h2, h3, h4, h5, h6 {
  color: #555;
  margin-top: 5px;
  text-shadow: none;
  font-weight: normal;
  font-family: Roboto;
}
h2 {
  font-size: 24px;
  line-height: 33px;
}
h2:after {
  background:linear-gradient(
    to right, 
    #56144A 0px, #56144A 15px,
    white 15px, white 45px,
    #C62428 45px, #C62428 60px,
    #F4A613 60px, #F4A613 75px,
    #007DC5 75px, #007DC5 120px,
    #B0c335 120px, #B0c335 135px
  );
  height:4px;
  display:block;
  content:"";
  width:135px;
  margin:0 auto;
}

<h2 class="title-v2 title-center">News</h2>

您只需:after上的<h2>设置边框即可。您可以在linear-gradient上为:after的背景定义不同的颜色。

如何在文本下添加多色边框

2 个答案: