<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元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...
随机推荐
- 关于安装AccessDatabaseEngine_x64.exe 的说明
开始--运行中 输入 cmd 进入界面 再输入路径 E:\BaiduYunDownload\AccessDatabaseEngine_X64.exe /passive 即完成安装. 注意,路 ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
- 出售一套Unity + Lua热更新框架代码
出售一套Unity + Lua的客户端框架代码,功能有资源管理.网络通信.配置文件解析.热更新.文件读写.Lua加密揭秘.UI框架.打包工具.编辑器工具等,已经在多个实际项目(已上线)中使用.代码优雅 ...
- vuejsLearn--- v-for列表渲染
Vue.js是一个构建数据驱动的web界面的库.重点集中在MVVM模式的ViewModel层,因此非常容易与其它库或已有项目整合 Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步 ...
- [原创]快速指定SQLDeveloper所使用JDK的方法
就众多的免费SQL开发工具来讲,Oracle出品的SQLDeveloper 还是一个很不错的选择. 看到网上不少的帖子讨论SQL Developer 启动的时候报告找不到Java Home(或JDK) ...
- 1.Linux是什么？
UNIX设计理念: 所有的程序或系统装置都是文件. 不管构建编辑器还是附属文件,所写的程序只有一个目的,就是有效地完成目标 操作系统:应用程序->系统调用->内核->硬件.其中系统调 ...
- Python开发程序：学员管理系统（mysql）
主题:学员管理系统 需求: 用户角色,讲师＼学员, 用户登陆后根据角色不同,能做的事情不同,分别如下 讲师视图: 管理班级,可创建班级,根据学员qq号把学员加入班级 可创建指定班级的上课纪录,注意一节 ...
- css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...
- C#大文件读取和查询--内存映射
笔者最近需要快速查询日志文件,文件大小在4G以上. 需求如下: 1.读取4G左右大小的文件中的指定行,程序运行占用内存不超过500M. 2.希望查询1G以内容,能控制在20s左右. 刚开始觉得这个应该 ...
- PostgreSQL function examples
warehouse_db=# CREATE TABLE warehouse_tbl(warehouse_id INTEGER NOT NULL,warehouse_name TEXT NOT NULL ...