<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元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...
随机推荐
- SqlServer 笔记二 获取汉字的拼音首字母
一.该函数传入字符串,返回数据为:如果为汉字字符,返回该字符的首字母,如果为非汉字字符,则返回本身. 二.用到的知识点:汉字对应的UNICODE值,汉字的排序规则. 三.数据库函数: )) ) AS ...
- Run P4 without P4factory - A Simple Example In Tutorials.
前言 本文是我运行P4社区于Github开源教程Tutorials中的P4 SIGCOMM 2015 Tutorial一些实战小结,Github链接: Github. 测试的例子:P4 SIGCOMM ...
- angular 数据绑定
1.ng-band 使用在index.html页面使用,该页面不要直接使用双花括号,否则网络延迟的时候页面会显示双花括号,由于通常只在index.html里导入angular.js,所以在其他模板页面 ...
- Python 开平方
#!/user/bin/python3#files :using_sys.pyf = open("filename.txt","r+")num = f.read ...
- createjs学习二之flash转canvas学习1
设置发布 或者 导出参数设置 c_lib_main c_images_main/ 导出之后的文件 打开导出的html文件可以看到如下,,可以正常显示的,,只是stop了还不能动 给舞台上某一元素添加点 ...
- html5 canvas画流程图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Oracle数据库导入、导出dmp文件
oracle导出数据: 1.该处的导出数据需要在dos命令行下执行,进入到oracle客户端路径下执行(该处也可为oracle客户端路径配置系统变量),如: E:\oraclexe\app\oracl ...
- charles抓包工具分享
今天,给大组内QA做了一次分享,主要面向移动端测试,介绍了我平时在测试工作中用到的功能,大家都积极响应,现场搭环境,现场操作,现场提问解答,最后大家都成功的利用起来了,感觉很有成就感.下面介绍我今天分 ...
- SQL Server 常用日期查询语句
--本月月初select dateadd(mm,datediff(mm,0,getdate()),0) --本月月末select DATEADD(DD,-1,DATEADD(MONTH,1+DAT ...
- 微信支付开发(7) 收货地址共享接口V2
关键字:微信公众平台 JSSDK 发送给朋友 收货地址共享接口 openAddress 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/weixin-open ...