如何设置<hr />样式以获得多种颜色？

Question

我需要创建<hr />，例如：

。我正在使用bootstrap，我一直在getbootstrap页面和互联网上搜索。我找不到我要找的东西，所以我希望你们中的一些人知道如何做到这一点。

正如我所说，它需要使用bootstrap或简单的css，不允许使用less和scss。

提前致谢

Answer 1

另一种选择是使用linear-gradient作为背景：

hr.colored {
  border: 0;   /* in order to override TWBS stylesheet */
  height: 5px;

  background: -moz-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%);  /* FF3.6+ */
  background: -webkit-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(196,222,138,1) 0%, rgba(196,222,138,1) 12.5%, rgba(245,253,212,1) 12.5%, rgba(245,253,212,1) 25%, rgba(255,208,132,1) 25%, rgba(255,208,132,1) 37.5%, rgba(242,122,107,1) 37.5%, rgba(242,122,107,1) 50%, rgba(223,157,185,1) 50%, rgba(223,157,185,1) 62.5%, rgba(192,156,221,1) 62.5%, rgba(192,156,221,1) 75%, rgba(95,156,217,1) 75%, rgba(95,156,217,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 87.5%, rgba(94,190,227,1) 100%); /* W3C */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<hr class="colored" />

Answer 2

您可以创建一个宽度为100％且内部有10个跨度的容器，每个容器占总宽度的10％。然后在每个跨度上应用您喜欢的背景颜色。

这样它就会变得流畅，你可以轻松地将它包装在另一个容器中，使其填充其宽度，而不是100％的页面。

每个范围可以通过为每个范围添加不同的类来定位，或者如果您愿意，也可以使用span：nth-​​child（1），span：nth-​​child（2）等。

<强>更新

我不会在Shaun Loftin的回答中获得支持，因为应用于<hr>的背景颜色仅适用于某些版本的Chrome。例如，现在在Linux上，我无法使用background-color:red;

看到hr着色

有一点可以肯定的是，即使在HTML5 Boilerplate中，他们也使用此代码来设置<hr>跨浏览器的样式：

hr { display: block; height: 1px;
    border: 0; border-top: 1px solid red;
    margin: 1em 0; padding: 0; }

如果您不想更改HTML元素，请使用此选项：

带有hr元素的DEMO http://jsfiddle.net/a_incarnati/gna7r4L8/83/

OTHERWISE 您可以使用其他元素模拟hr。 它取决于你。

＆＃13;

＆＃13;

span { display:block; width:10%; float:left; height:5px;}
.line{
    width:100%;
}
.color-1{
    background:green;
}
.color-2{
    background:yellow;
}
.color-3{
    background:purple;
}
.color-4{
    background:red;
}
.color-5{
    background:orange;
}
.color-6{
    background:lightgreen;
}
.color-7{
    background:gold;
}
.color-8{
    background:brown;
}
.color-9{
    background:lightblue;
}
.color-10{
    background:lightgrey;
}

＆＃13;

<div class="line">
    <span class="color-1"></span>
    <span class="color-2"></span>
    <span class="color-3"></span>
    <span class="color-4"></span>
    <span class="color-5"></span>
    <span class="color-6"></span>
    <span class="color-7"></span>
    <span class="color-8"></span>
    <span class="color-9"></span>
    <span class="color-10"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果我是你，我会创建多个小时并且为它们分配一个包装，这样它们就能组合在一起。您可以为每个hr分配不同的ID，然后使用HTML调用它们。然后，使用CSS为它们分配不同的背景颜色。

例如：

<强> HTML：

<hr id="red"><hr id="blue">

<强> CSS ：

#red {background-color:red;}
#blue {background-color:blue;}

FIDDLE

---

您也可以使用HTML内联样式而不使用外部样式表。它看起来像是：

<强> HTML：

<hr style="background-color:red"><hr style="background-color:blue">

FIDDLE

<小时/> 我有点做了一些事情，看看this fiddle我做了一会儿，这可能与你正在看的东西有关。希望这有帮助！

Answer 4

您可以使用线性渐变为<hr>背景设置样式。试试这个

hr {
  border: 0; 
  height: 1px;
  background: linear-gradient(to right, red, yellow, green);
}

在此处查看http://jsfiddle.net/es49mmcb/1/