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

文章13116 · 评论469

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

字数1646 · 浏览 5096 · 评论 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界面

文章 41517

APP欣赏

APP欣赏

文章 41450

APP手机界面

APP手机界面

文章 41440

图片素材

图片素材

文章 29463

高清图片

高清图片

文章 26225

更多 推荐作者

问说网

文章 13116

GallupDarnell

文章 117

GibbonRoy

文章 119

StuartKelly

文章 114

YeatesGeoffrey

文章 113

发布评论

顶部 反馈 评论 底部

意见反馈

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

您的反馈我们已收到!

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