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

问说网 · 发布于 2015-03-19 · 字数1646 · 浏览 5983 · 评论 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/

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

相关文章

  • 2014-02-25liteAccordion是一个水平方向的手风琴jQuery插件
  • 2014-11-18去掉表格TD默认间隙和添加1px像素的边框
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2015-08-08使用Python发送和接收Email电子邮件
  • 2016-06-20Lost connection to MySQL server during query错误解决方法
  • 2016-07-06Java中面向对象的封装和继承以及多态
  • 2016-07-06Java异常处理
  • 2016-07-06Oracle(ALL | DBA | USER)
  • 发布评论

    为您推荐

    纯CSS3制作面包屑导航

    面包屑导航让用户知道他们都在一个层次结构,并回到上级页面层次结构中的。同时,面包屑可以减少行动用户数需要执行为了找回来。所以,保持它的简单,如果你有一个有很多页…

    • 纯CSS3制作面包屑导航
    • 纯CSS3制作面包屑导航
    • 纯CSS3制作面包屑导航
    • 纯CSS3制作面包屑导航
    问说网 · 发布于 2015-04-06 · 浏览 2038 · 评论 0
    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    问说网 · 发布于 2016-12-02

    FlyJSONP轻量级的跨域AJAX请求插件

    FlyJSONP是一个JavaScript库,用于实现跨域GET和POST请求服务,支持JSONP,并取得一个JSON格式的数据响应,这个Library具有易于…

    Photoshop bootstrap
    问说网 · 发布于 2016-05-14

    Photoshop bootstrap

    PSD设置你自己的图层,图层组和Bootstrap,创建你自己的预定义集层,图层组Bootstrap你不需要手动设置这些每一次你需要一个新的PSD。

    设计趋势抢先看!2015年网页设计10大新趋势

    金秋十月,又是一年收获的季节。转眼间我们将要和2014告别,2014,你收获了什么?到目前为止,我们已经看到一些设计趋势在发生。现在,我们来预测一下2015年的…

    • 设计趋势抢先看!2015年网页设计10大新趋势
    • 设计趋势抢先看!2015年网页设计10大新趋势
    • 设计趋势抢先看!2015年网页设计10大新趋势
    • 设计趋势抢先看!2015年网页设计10大新趋势
    SamPolly · 发布于 2016-05-14 · 浏览 929 · 评论 0

    简单几招提升你的设计

    UI系列实战第二篇,主要将图层样式的投影和渐变叠加的使用,这一次主要讲PS中图层样式的一些使用技巧,你喜欢或者不喜欢,教程就在这里,不弃不离。

    • 简单几招提升你的设计
    • 简单几招提升你的设计
    • 简单几招提升你的设计
    • 简单几招提升你的设计
    CroninBevis · 发布于 2016-05-17 · 浏览 1070 · 评论 0

    一枚金币的故事UI设计教程

    一枚金币的故事UI设计教程,手把手教你如何绘制一枚简单逼真的金币,教程中运用了大量的PS特效,让人不得不佩服PS的强大魅力和图形处理能力。

    • 一枚金币的故事UI设计教程
    • 一枚金币的故事UI设计教程
    • 一枚金币的故事UI设计教程
    • 一枚金币的故事UI设计教程
    HuttBarton · 发布于 2016-05-17 · 浏览 1061 · 评论 0
    问说网 · 发布于 2016-07-05

    刷流量的注意了使用流量宝可能会中毒!

    相信大家都知道刷流量的有很多软件,最著名的就是流量精灵和流量宝,而我一直使用的流量宝,两个软件的使用基本差不多,可是你知道吗?使用流量刷流量可能会中毒,这不是危…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

    问说网分享与设计有关的文章素材界面和作品,提供设计教程、素材分享、界面欣赏、编程设计、设计书籍、设计师导航等内容,你可以在这里阅读、学习、分享、交流。

    13130 文章
    495 评论
    2052 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2780

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2605

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2684

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2129

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2339

    更多 推荐作者

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    关注 呼吸快窒息

    文章 104 · 评论 0

    关注 失戀德標簽

    文章 92 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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