<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元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...
随机推荐
- mysql大表myisam的导入
在my.cnf中增大以下参数 myisam_sort_buffer_size = 1024Mtmp_table_size = 256M tmpdir = /home/tmpmyisam_max_sor ...
- Objective-c防止数组越界而崩溃（全局效果）
数组越界其实是很基本的问题,但是解决起来除了count的判断,还有每个调用的时候都要去判断一遍 对于不明确的数据总会有崩溃的风险 然而 每次调用都判断 那是太累了 so ..runtime&c ...
- mysql实现分组和组内序号
SELECT CASE WHEN @mid = t.PAY_TIME THEN ELSE END SEQ, @mid := t.PAY_TIME, t.AMOUNTS, t.CHARGE_PRICE, ...
- iOS UITableViewCell的"滑动出现多个按钮"
本文授权转载,作者:@夏天是个大人了 前言: 本篇博客其实就是想介绍tableviewcell滑动的一些"事",昨天在逛github的时候看到的还挺有意思的三方库,简单用了一下感觉 ...
- vert.x学习（八），用JDBCClient配合c3p0操作数据库
今天学习了下vert.x的JDBCClient,我这里将今天的学习笔记记录下来.这次学习中使用了c3p0. 用使用JDBCClient和c3p0得现在pom.xml文件里面导入对应的依赖,下面贴出xm ...
- 【leedcode】 Longest Palindromic Substring
Given a , and there exists one unique longest palindromic substring. https://leetcode.com/problems/l ...
- gvim初学命令记录
一.vim进入和退出(在正常模式下进行)若不能保证是否处于正常模式,先按下ESC键不保存退出 :q!(冒号也是键的)保存退出 :wq二.移动 k(上)h(左) l(右) j(下)三.删除(可类似于剪切 ...
- Swift: 在Swift中桥接OC文件（自己创建的类文件、第三方库文件）
一.介绍 随着Swift的逐渐成熟,使用swift开发或者混合开发已经成为了一个趋势,本身苹果公司也十分推荐使用Swift这门新语言.目前Swift已经更新到了3.0,估计没有多久4.0就要出来了.那 ...
- PorterDuffXfermode的用法
1.下面的Xfermode子类可以改变这种行为: AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode 当覆盖 ...
- javascript sandbox
用途 https://github.com/gf3/sandbox Can be used to execute untrusted code. Support for timeouts (e.g. ...