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

问说网 · 发布于 2015-03-19 · 字数1646 · 浏览 6331 · 评论 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-07-15十分钟搞清字符集和字符编码
  • 2015-10-14Jingle UI基于HTML5和CSS3轻量级移动WEB应用开发框架
  • 2015-07-15JavaScript 秘密花园
  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-04-14详解Web中的DOM Ready事件方法
  • 2016-05-13Touch.js百度云的移动设备手势识别与事件库
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 发布评论

    为您推荐

    十分钟搞清字符集和字符编码
    问说网 · 发布于 2016-07-15

    十分钟搞清字符集和字符编码

    在介绍字符集之前,我们先了解下为什么要有字符集。我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流。

    用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-04-16

    jQuery.PercentageLoader加载进度显示插件

    jQuery.PercentageLoader 这个jQuery插件能够产生一种吸引人、更直观醒目的方式显示进度。它采用HTML 5 canvas 生成进度图片…

    问说网 · 发布于 2016-05-13

    判定被7整除的简易方法

    判断一个数的整除性对于某些除数来说是一件非常容易的事,比如2、3、4、5、6、8、9、10、11、12、15但是对于7来说一直是一个难题,而判定是否被7整除在数…

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

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

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

    问说网 · 发布于 2016-06-28

    jqFloat.js实现页面元素的浮动效果jQuery插件

    jqFloat.js是一个jQuery插件,能够让网页里面的任意元素浮动,并且可以实现动画效果,支持鼠标响应事件,并且它是跨浏览器兼容的,使用简单方便,它有助于…

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

    angularAMD使用RequireJS和AngularJS快速构建WebApp

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

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    问说网

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

    13134 文章
    495 评论
    2059 人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 3020

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2802

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2911

    图片素材

    关注 图片素材

    文章 29463 · 浏览 2335

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2534

    更多 推荐作者

    关注 惢碎葬爱

    文章 96 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 溫柔的溫柔

    文章 91 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    关注 凉城梦镜

    文章 79 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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