<hr> 的18种样式
18 Simple Styles for Horizontal Rules (hr CSS Design)
Code：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Simple Styles for <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种样式的更多相关文章
- css 定义hr的几种样式
<style type="text/css"> <!-- .hr0{ height:1px;border:none;border-top:1px dashed # ...
- CSS选 择器 三种样式
一.CSS三种样式 代码 宽度 高度 实线 颜色 A内联样式是优先级最高的方式 px必须写 A:内联式 弊端:代码多很乱 <body> <div class="divc ...
- 18种CSS3loading效果完整版，兼容各大主流浏览器，提供在线小工具使用
今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...
- 社交APP经典死法18种，听野路子产品菜狗怎么说
点这里 社交APP经典死法18种,听野路子产品菜狗怎么说 时间 2015-04-06 11:24:53 虎嗅网相似文章 (4)原文 http://www.huxiu.com/article/112 ...
- CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=" ...
- 多个超链接a 选中的和不选中的两种样式
<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"> 浏览器自带的jquery库 <scri ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- 18种CSS3loading效果完整版
今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...
- CSS02--四种样式、背景、文本、链接状态、表格样式
接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...
随机推荐
- mmysql-最大链接数和最大并发数的区别
关于连接数和并发数的设置(针对Innodb引擎) 对于机器本身来说,进程数是说机器正在运行的进程数量,调出任务管理器就可以看到.连接数是指进程接收和发送数据的连接ip的数量.并发数是指进程同时发送数据 ...
- 使用配置文件来配置JDBC连接数据库
1.管理数据库连接的Class 代码如下: package jdbcTest;import java.sql.Connection;import java.sql.DriverManager;impo ...
- sleep thread process
$str = 'w0'; for($w=0;$w<999999;$w++){ $sql = 'INSERT INTO w1 (wint,wchar) VALUES ('.$w.',"' ...
- Flink - NetworkEnvironment
NetworkEnvironment 是一个TaskManager对应一个,而不是一个task对应一个 其中最关键的是networkBufferPool, operator产生的中间结果,Result ...
- win7+vs2008+windows mobile6.5.3
1.安装vs2008+vs2008sp12.安装Windows Mobile 6 Professional SDK Refresh.msi3.安装Windows Mobile 6 Profession ...
- NOI上看到的几个小学奥数
:余数相同问题 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 已知三个正整数 a,b,c. 现有一个大于1的整数x,将其作为除数分别除a,b,c,得到的余数相同 ...
- Git实用命令手册
下载代码 git clone <git地址> 用户配置 git config —-global user.name <name> git config —-global use ...
- pixelmator处理png图片，处理掉过白的留白。
作为一个CTO,还是得学会一些普通的修图技术的.这不,刚学会在pixelmator下如何处理png中过多的留白. 汗,其实就是一个菜单选项而已./image/trim canvas 效果如下:
- 点击切换panel
//点击标题切换 $("li[class^='fore-']").click(function(){ var nomber = $(this).index();//点击的第几个 $ ...
- charles抓包工具的中文乱码解决方法
charles是 MAC上最好用的抓包工具.charles 网上的参考文档已经很多,我就不再赘述啦.只是说说我在安装过程遇到的问题和解决方法,仅供参考. charles抓包的数据中的中文内容显示乱码, ...