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. 【emWin】例程四：显示文本

    实验指导书及代码包下载: http://pan.baidu.com/s/1jHOYdqm

  2. 使用 Composer 为 ThinkPHP（3.2.3）框架添加和管理组件

    环境:Windows 64位 PHP 版本: 框架:ThinkPHP Tips: 组件:打包的代码,可以是一系列相关的类(class).接口(interface).特性(trait),用于解决某个具体 ...

  3. JVM原理讲解和调优

    一.什么是JVM JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现 ...

  4. 利用jemalloc优化mysql

    一.下载安装jemalloc #wget http://www.canonware.com/download/jemalloc/jemalloc-3.6.0.tar.bz2 #tar jxvf jem ...

  5. 如何利用python监控主机存活并邮件、短信通知

    功能: 1.使用定时任务执行脚本,检查主机存活信息2.将主机存活信息写入指定文件3.发现宕机的主机后给用户发邮件提醒备注:因为139邮箱在接受到邮件后会自动给用户发送条短信告知(且此服务免费),所以间 ...

  6. iOS索引列开发详解

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

  7. 《linux内核设计与实现》实践之模块及深入

     <linux内核设计与实现>实践之模块及深入 写在前面的话. 基础模块部分我已经做完了,设计到的知识点无非就是,编写模块代码,编写Makefile文件,加载模块和卸载模块部分.由于大家都 ...

  8. MYSQL实现主从复制

    mysql主(称master)从(称slave)复制的原理:       (1).master将数据改变记录到二进制日志(binary log)中,也即是配置文件log-bin指定的文件(这些记录叫做 ...

  9. ORA-29275: partial multibyte character

    查询表报错 修改方式1 和字符集存储方式有关系 ,修改客户端和服务器的字符集存储方害死 修改方式2 修改表的字段由nvarchar2修改为varchar2

  10. Hadoop学习笔记： 安装配置Hive

    1. 在官网http://hive.apache.org/下载所需要版本的Hive,以下我们就以hive 2.1.0版为例. 2. 将下载好的压缩包放到指定文件夹解压,tar -zxvf apache ...