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

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

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

相关文章

  • 2016-05-03Perfectionist轻量级CSS代码格式化插件
  • 2016-05-14无与伦比!30个精美绝伦的酒店网站设计
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-16新年大福利!为设计师准备的14个免费的PS插件
  • 2016-05-27Flutter基于Dart的高性能移动应用UI框架
  • 2016-07-05刷流量的注意了使用流量宝可能会中毒!
  • 2016-07-06JBoss下WebService开发
  • 2016-07-16Canvas-nest.js超赞的网页粒子背景插件
  • 发布评论

    为您推荐

    问说网 · 发布于 2014-11-10

    艺术设计与工程设计

    从不同的角度,可以对设计进行不同的分类。这里,我们根据是否可以用逻辑的方法来认识设计,可以把分为两大类:艺术设计和工程设计。尽管同属于设计,艺术设计和工程设计有…

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

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

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

    详解Web中的DOM Ready事件方法
    问说网 · 发布于 2016-04-14

    详解Web中的DOM Ready事件方法

    熟悉jQuery的人,都知道DomReady事件,window.onload事件是在页面所有的资源都加载完毕后触发的,如果页面上有大图片等资源响应缓慢,会导致w…

    PS教程!用Photoshop打造逼真的冰冻文字特效

    朋友们!国庆假期已过,冬天也将袭来,今天创意互动将和大家一起来学习制作冰冻文字的全过程,使用的工具有自定义笔刷、多种纹理、调整图层以及滤镜。感兴趣的朋友们一起来…

    • PS教程!用Photoshop打造逼真的冰冻文字特效
    • PS教程!用Photoshop打造逼真的冰冻文字特效
    • PS教程!用Photoshop打造逼真的冰冻文字特效
    • PS教程!用Photoshop打造逼真的冰冻文字特效
    DickeyAnsel · 发布于 2016-05-17 · 浏览 950 · 评论 0
    问说网 · 发布于 2016-06-20

    Lost connection to MySQL server during query错误解决方法

    昨天使用Navicat for MySQL导入MySQL数据库的时候,出现了一个严重的错误,Lost connection to MySQL server du…

    angularAMD使用RequireJS和AngularJS快速构建WebApp
    问说网 · 发布于 2016-07-05

    angularAMD使用RequireJS和AngularJS快速构建WebApp

    angularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web Ap…

    Java初识

    版本体系 JavaSE Java 2 Platform, J2SE, Standard Edition,标准版, 主要用于桌面应用软件的编程, 包含那些构成Ja…

    • Java初识
    • Java初识
    • Java初识
    • Java初识
    Vincent · 发布于 2016-07-06 · 浏览 983 · 评论 0
    详细讲解JAVA中的IO流
    Vincent · 发布于 2016-07-06

    详细讲解JAVA中的IO流

    包 java.io   文件路径 1. java.io.File是文件和目录路径名的抽象表示形式 2. 抽象路径名中的第一个名称是目录名,抽象路径名中…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13130 文章
    495 评论
    2019 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2474

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2327

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2376

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1864

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2032

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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