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

问说网 · 发布于 2015-03-19 · 字数1646 · 浏览 5412 · 评论 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-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-04-08分享Web前端重构相关细节
  • 2016-05-16说的太好了!UI设计新手7条法则助你逆袭(一)
  • 2016-05-17[智能电视UI教程]智能电视用户体验设计分享之遥控器篇
  • 2016-05-17三步制作出这种精美弥散阴影
  • 2016-06-06JS制作的炸金花小游戏
  • 2016-06-06PHP求异形多维数组的平均值
  • 2016-06-20PHPAnalysis简单方便的PHP分词系统类
  • 发布评论

    为您推荐

    在WordPress中自动邮件地址防骚扰
    问说网 · 发布于 2015-11-12

    在WordPress中自动邮件地址防骚扰

    我们可能需要在网站上留我们的邮件地址,但是这却给我们带来了很多困扰,比如有的营销软件就会批量自动抓取右键地址,然后推送垃圾广告邮件,这种邮件可谓是防不甚防,几乎…

    Crunch基于Air跨平台Less代码编译器

    Crunch 是一个基于 Adobe AIR 开发的 Less CSS 的编辑器,同时也可以作为 LESS 的编辑器,主要用于 Less 代码的编辑并将其编译成…

    • Crunch基于Air跨平台Less代码编译器
    • Crunch基于Air跨平台Less代码编译器
    • Crunch基于Air跨平台Less代码编译器
    • Crunch基于Air跨平台Less代码编译器
    问说网 · 发布于 2015-11-13 · 浏览 1319 · 评论 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具有易于…

    问说网 · 发布于 2016-03-17

    Lazyr.js轻量级的图片延时加载插件

    Lazyr.js是一个轻量级、响应迅速JavaScript图片延迟加载库,并且不依赖任何第三方的插件和库,通过只显示用户能看到的图片,节省服务器开销,快速的响应…

    问说网 · 发布于 2016-03-22

    C语言的设计模式之接口隔离

    定义为客户端不应该依赖它不需用的接口,在C语言中我们可以把头文件看成一个模块的接口,根据接口隔离原则也就是说这个头文件中只能包含外部需要的接口,但在实际的项目中…

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

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    智能电视用户体验设计分享之焦点篇

    智能电视作为新兴行业,国内相关的用户体验知识少得可怜。今天有请负责智能电视APP设计一年半的@卜卜胡萝卜1992 给大家分享一些实用的设计经验,科普电视用户体验…

    • 智能电视用户体验设计分享之焦点篇
    • 智能电视用户体验设计分享之焦点篇
    • 智能电视用户体验设计分享之焦点篇
    • 智能电视用户体验设计分享之焦点篇
    SymonsJessie · 发布于 2016-05-17 · 浏览 1042 · 评论 0

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13128 文章
    493 评论
    1887 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1785

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1723

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1732

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1230

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1430

    更多 推荐作者

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 過往溫柔

    文章 98 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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