<hr>标签一般都用于在网页上面显示一个水平线，但是默认的样式是一条2px的黑色的线条，很难看，今天给大家分享一些好看的水平线样式，你可以得到很多的元素像一个华丽的<div>可以保存的内容，但我喜欢一个水平规则的语义。它的两部分之间的内容重点突。
注意，在这些例子中，生成的内容是用 (:before/:after)。这不是为了工作，据我所知，因为<hr>没有内容的风格元素（他们没有关闭标签）。但你可以看到它。如果你关注超级长期设计逼真，远离那些。
径向渐变
/* Gradient color1 - color2 - color1 */
hr.style-one {
border: 0;
height: 1px;
background: #333;
background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
}
双实线
/* Glyph, by Harry Roberts */
hr.style-eight {
padding: 0;
border: none;
border-top: medium double #333;
color: #333;
text-align: center;
}
hr.style-eight:after {
content: "§";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: white;
}
