<hr> 的18种样式
2016-01-05 20:51
591 查看
18 Simple Styles for Horizontal Rules (hr CSS Design)
Simple Styles for <hr>'s
Code:
View Code
样式:
Simple Styles for <hr>'s
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>
View Code
样式:
相关文章推荐
- css3-表格
- 两种引用外部CSS文件的方法
- CSS hack大全(区分浏览器)
- css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
- CSS学习之实例
- css3-列表
- css3-链接
- CSS中背景颜色的渐变
- 用t4模板和head.js进行css和js的版本控制
- css reset 整理
- CSS 巧用 :before和:after
- 一般项目的CSS规范
- CSS3打造磨砂玻璃的背景
- CSS3打造磨砂玻璃的背景
- css压缩网址
- Flex修改datagrid 标题颜色(引入CSS样式修改)
- CSS基础—样式
- (原)前端知识杂烩(css系列)
- CSS3实现围绕任何点来旋转-京东推荐动画
- css知识复习