问说网 · 发表于 2015-03-19

文章13129 · 评论476

使用CSS3制作简单的<hr>水平线样式

字数1646 · 浏览 5177 · 评论 0

<hr>标签一般都用于在网页上面显示一个水平线,但是默认的样式是一条2px的黑色的线条,很难看,今天给大家分享一些好看的水平线样式,你可以得到很多的元素像一个华丽的<div>可以保存的内容,但我喜欢一个水平规则的语义。它的两部分之间的内容重点突。

使用CSS3制作简单的<hr>水平线样式

注意,在这些例子中,生成的内容是用 (: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;
}

更多样式请访问:https://css-tricks.com/examples/hrs/

本文系作者 问说网 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

问说网手机版

躺着 站着 跪着轻松访问

更多 热门话题

APP界面

关注 APP界面

文章 41507 · 浏览 1182

APP欣赏

关注 APP欣赏

文章 41430 · 浏览 1070

APP手机界面

关注 APP手机界面

文章 41420 · 浏览 1099

图片素材

关注 图片素材

文章 29463 · 浏览 728

高清图片

关注 高清图片

文章 26225 · 浏览 860

更多 推荐作者

关注 秋末残雪

文章 99 · 评论 0

关注 秋天的孤寂

文章 97 · 评论 0

关注 惢碎葬爱

文章 91 · 评论 0

关注 怎麽继续

文章 88 · 评论 2

关注 倾听寂寞

文章 82 · 评论 0

关注 溫柔的溫柔

文章 86 · 评论 0

发布评论

顶部 反馈 评论 底部

意见反馈

感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

您的反馈我们已收到!

感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!