<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; }