html hr 样式,<hr> 的18种样式

Code：

Simple Styles for <hr>'s

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

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;

}

样式：

大的

-->

css 定义hr的几种样式

CSS选 择器 三种样式

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

浏览器自带的jquery库

css三种样式表写法

css三种样式表:1.内嵌样式表: 

   < ...

18种CSS3loading效果完整版

今天把之前分享的两篇博客和 整理了一下.因为之前所分享的各种loading效果都只是做了we ...

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

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

随机推荐

WebDriver测试EXT控件(基于C&num;)

WebDriver测试EXT控件(基于C#)http://www.docin.com/p-748096409.html

SQL Server 查看对象的权限

例子 1. 查看登录名 loginA的权限: create login loginA with password = '123456'; go use studio; create user logi ...

最大流量dinci模板

我们知道.增广路径EK时间是在充电算法的O(n*m^2).找到最短增广路径的时间复杂度为O(m*n^2).这样的时间复杂度主要是寻找扩充道路. 这里也有一个演示Dinci算法,使用BFS层次结构图,然 ...

Delphi Math里的基本函数，以及浮点数比较函数(转)

源:Delphi Math里的基本函数,以及浮点数比较函数 Delphi里的好东西太多,多到让人觉得烦.这种感觉就是当年打游戏,改了钱以后,有钱了每天都要造建筑,明明是好事, ...

【blog】SpringBoot聚合项目打包问题

在需要打包的模块的pom中,必须加上如下配置 org.springframewo ...

C&num;调用cmd命令

using System.Diagnostics; public class CmdHelper { private static string CmdPath = @"C:\Windows ...

sql server 时间格式转换

sql server2000中使用convert来取得datetime数据类型样式(全) 日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-0 ...

HDU1203&colon;I NEED A OFFER&excl;&lpar;01背包)

http://acm.hdu.edu.cn/showproblem.php?pid=1203 Problem Description Speakless很早就想出国,现在他已经考完了所有需要的考试,准 ...

javascript 进阶篇1 正则表达式，cookie管理，userData

首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了. 基本语 ...