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. javascript:算法之for循环

    一.for中的表达式 ①短路表达式 a && b是表达式:当执行的时候如果表达式a结果不是0,就会执行表达式b.如果表达式a执行的结果是0,表达式b不执行 ②i++与++i的不同 ++ ...

  2. swift-UITableView

    import UIKit class FirstVC: UIViewController,UITableViewDelegate,UITableViewDataSource { var tableVi ...

  3. [转载] Win7KB3146706补丁导致蓝屏0x0000006B的修复方案

    进入winpe,将附件的蓝屏6B修复补丁kb3146706.zip的补丁替换windows/system32下面的ci.dll文件,里面有64和32位系统的,替换了文件就可以进入系统了. 启动进入系统 ...

  4. java并发容器类

    本文主要介绍java并发容器相关实现类,collections节点下接口方法介绍. Queue Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是Blocking ...

  5. 批处理命令 BAT备份MySQL数据库

    批处理命令 BAT备份MySQL数据库 作者: 字体:[增加 减小] 类型:转载 时间:2009-07-23我要评论 MySQL数据的备份工具也许有很多,在这我要给大家分享一下通过DOS批处理命令和M ...

  6. linux安装jdk和scala

    安装jdk 1.下载jdk 2.在linux中创建一个文件夹java,我习惯放在user下 3.上传jdk安装包到java下,然后解压 4.ect/profile下修改文件,添加环境变量 JAVA_H ...

  7. ax Mail

    SysMailer mailer = new SysMailer(); SysEmailParameters parameters = SysEmailParameters::find(); ; tr ...

  8. oracle+servlet+extjs4 分页表格布局示例代码

    Log.java package com.example.entity; import java.util.Date; public class Log { private int id; priva ...

  9. 【OpenWRT】【RT5350】【二】烧写OpenWrt到RT5350开发板

    烧写bin文件到开发板的方式有很多种,我采用的是通过web页面直接上传文件的方式 首先通过浏览器登陆路由器(192.168.1.1),作者的开发板已经烧好了OpenWrt并且可以通过Luci登陆,所以 ...

  10. 如何让tomcat不记录catalina.out这个日志文件

    tomcat日志记录配置在conf/logging.properties中 有这5类日志 catalina,localhost,manager,admin(控制台),host-manager 还有8个 ...