18 Simple Styles for Horizontal Rules (hr CSS Design)

Simple Styles for <hr>'s

Code：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset='UTF-8'>

     <title>Simple Styles for &lt;hr>'s</title>

 </head>

 <body>

 <br>

 <hr class="style1">

 <br>

 <hr class="style2">

 <br>

 <hr class="style3">

 <br>

 <hr class="style4">

 <br>

 <hr class="style5">

 <br>

 <hr class="style6">

 <br>

 <hr class="style7">

 <br>

 <hr class="style8">

 <br>

 <hr class="style9">

 <br>

 <hr class="style10">

 <br>

 <hr class="style11">

 <br>

 <hr class="style12">

 <br>

 <hr class="style13">

 <br>

 <hr class="style14">

 <br>

 <hr class="style15">

 <br>

 <hr class="style16">

 <br>

 <hr class="style17">

 <br>

 <hr class="style18">

 <style>

 hr{

   width: 100%;

 }

 hr.style1{

     border-top: 1px solid #8c8b8b;

 }

 hr.style2 {

     border-top: 3px double #8c8b8b;

 }

 hr.style3 {

     border-top: 1px dashed #8c8b8b;

 }

 hr.style4 {

     border-top: 1px dotted #8c8b8b;

 }

 hr.style5 {

     background-color: #fff;

     border-top: 2px dashed #8c8b8b;

 }

 hr.style6 {

     background-color: #fff;

     border-top: 2px dotted #8c8b8b;

 }

 hr.style7 {

     border-top: 1px solid #8c8b8b;

     border-bottom: 1px solid #fff;

 }

 hr.style8 {

     border-top: 1px solid #8c8b8b;

     border-bottom: 1px solid #fff;

 }

 hr.style8:after {

     content: '';

     display: block;

     margin-top: 2px;

     border-top: 1px solid #8c8b8b;

     border-bottom: 1px solid #fff;

 }

 hr.style9 {

     border-top: 1px dashed #8c8b8b;

     border-bottom: 1px dashed #fff;

 }

 hr.style10 {

     border-top: 1px dotted #8c8b8b;

     border-bottom: 1px dotted #fff;

 }

 hr.style11 {

     height: 6px;

     background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;

     border: 0;

 }

 hr.style12 {

     height: 6px;

     background: url(http://ibrahimjabbari.com/english/images/hr-12.png) repeat-x 0 0;

     border: 0;

 }

 hr.style13 {

     height: 10px;

     border: 0;

     box-shadow: 0 10px 10px -10px #8c8b8b inset;

 }

 hr.style14 {

   border: 0;

   height: 1px;

   background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

   background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

   background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

   background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

 }

 hr.style15 {

     border-top: 4px double #8c8b8b;

     text-align: center;

 }

 hr.style15:after {

     content: '\002665';

     display: inline-block;

     position: relative;

     top: -15px;

     padding: 0 10px;

     background: #f0f0f0;

     color: #8c8b8b;

     font-size: 18px;

 }

 hr.style16 {

   border-top: 1px dashed #8c8b8b;

 }

 hr.style16:after {

   content: '\002702';

   display: inline-block;

   position: relative;

   top: -12px;

   left: 40px;

   padding: 0 3px;

   background: #f0f0f0;

   color: #8c8b8b;

   font-size: 18px;

 }

 hr.style17 {

     border-top: 1px solid #8c8b8b;

     text-align: center;

 }

 hr.style17:after {

     content: '§';

     display: inline-block;

     position: relative;

     top: -14px;

     padding: 0 10px;

     background: #f0f0f0;

     color: #8c8b8b;

     font-size: 18px;

     -webkit-transform: rotate(60deg);

     -moz-transform: rotate(60deg);

     transform: rotate(60deg);

 }

 hr.style18 {

   height: 30px;

   border-style: solid;

   border-color: #8c8b8b;

   border-width: 1px 0 0 0;

   border-radius: 20px;

 }

 hr.style18:before {

   display: block;

   content: "";

   height: 30px;

   margin-top: -31px;

   border-style: solid;

   border-color: #8c8b8b;

   border-width: 0 0 1px 0;

   border-radius: 20px;

 }

 </style>

 </body>

 </html>

样式：

大的

-->

<hr> 的18种样式的更多相关文章

  1. css 定义hr的几种样式

    <style type="text/css"> <!-- .hr0{ height:1px;border:none;border-top:1px dashed # ...

  2. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  3. 18种CSS3loading效果完整版，兼容各大主流浏览器，提供在线小工具使用

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  4. 社交APP经典死法18种，听野路子产品菜狗怎么说

    点这里 社交APP经典死法18种,听野路子产品菜狗怎么说 时间 2015-04-06 11:24:53  虎嗅网相似文章 (4)原文  http://www.huxiu.com/article/112 ...

  5. CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...

  6. 多个超链接a 选中的和不选中的两种样式

    <script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"> 浏览器自带的jquery库 <scri ...

  7. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  8. 18种CSS3loading效果完整版

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  9. CSS02--四种样式、背景、文本、链接状态、表格样式

    接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...

随机推荐

  1. 使用太过简单jqprint源码也极其简洁易懂

    就像开发一样, 这篇文档如果没有人关心和维护, 里面的内容就会变得老旧, 过时而不再具有参考价值. 所以, 我希望所有看到并喜欢这篇文档的人都一起来维护它. 放心大胆的提交 Pull Request ...

  2. [转自itilxf论坛]iTop百问百答

    iTop是什么,和其他itsm软件相比有什么优势?iTop,是一个开源web应用程序,用于IT环境的日常运营.它基于ITIL最佳实践,而又不拘泥于任何具体流程. 优势: 1. 开源,扩展性强容易开发. ...

  3. 使用rsync同步文件

    rsync是Unix/Linux下同步文件的一个高效算法,它能同步更新两处计算机的文件与目录,并适当利用查找文件中的不同块以减少数据传输.关于rsync的核心算法,有兴趣的看下这篇文章. 这里介绍一下 ...

  4. percona-toolkit中在线ddl

    percona-toolkit中在线ddl percona-toolkit工具提供了一组用于mysql操作的工具,比如主从复制,在线更改mysql表ddl等 一.安装1.安装perl(略)2.BI&a ...

  5. Android Unable to instantiate activity: Didn't find class on path

    Android Unable to instantiate activity: Didn't find class on path After i spend a while on this prob ...

  6. iOS索引列开发详解

    做苹果开发的朋友在地区列表可能会遇到在页面的右侧有一列类似与导航的索引列,这次有机会遇到了,细细研究了一下,原来没有想象中的困难,只需要简单的几步就能做出自己的索引列.本来想和搜索条在一块讲解,后来考 ...

  7. linux实践之程序破解

    linux实践之程序破解 这次的实践是文件破解,让我们从login可执行文件开始吧! 首先我们执行一下这个可执行程序 ①我们希望在不知道密码的情况下,能够登陆进去.且无论密码是什么,都是提示“on y ...

  8. Scala的模式匹配

    1.概述 2.程序示例(普通的示例) 3.模式匹配(Array) 4.程序示例(Array) 5.模式匹配(List) 6.程序示例 7.遍历 8.模式匹配(case class) 9.程序示例(传统 ...

  9. yii2 登录验证

  10. (Java) 2014年1月1日减一个月涉及时间与字符的转换

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...