的18种样式

时间：2022-03-17 08:55:33

18 Simple Styles for Horizontal Rules (hr CSS Design)

Simple Styles for <hr>'s

Code：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset='UTF-8'>

     <title>Simple Styles for &lt;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种样式的更多相关文章

  1. css 定义hr的几种样式

    <style type="text/css"> <!-- .hr0{ height:1px;border:none;border-top:1px dashed # ...

  2. CSS选 择器 三种样式

    一.CSS三种样式 代码 宽度 高度 实线 颜色  A内联样式是优先级最高的方式 px必须写 A:内联式  弊端:代码多很乱 <body> <div class="divc ...

  3. 18种CSS3loading效果完整版，兼容各大主流浏览器，提供在线小工具使用

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  4. 社交APP经典死法18种，听野路子产品菜狗怎么说

    点这里 社交APP经典死法18种,听野路子产品菜狗怎么说 时间 2015-04-06 11:24:53  虎嗅网相似文章 (4)原文  http://www.huxiu.com/article/112 ...

  5. CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级

    从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码: <p style=&quot ...

  6. 多个超链接a 选中的和不选中的两种样式

    <script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"> 浏览器自带的jquery库 <scri ...

  7. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  8. 18种CSS3loading效果完整版

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  9. CSS02--四种样式、背景、文本、链接状态、表格样式

    接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...

随机推荐

  1. &lt&semi;新手必读&gt&semi;Eclipse中，Add Jars与Add Library的区别

    Eclipse中,工程属性的Java Build Path的Library标签页下,有如下几个按钮:Add Jars...添加JAR包,是指本Eclipse当前包含的工程中的,在工程列表下选取即可Ad ...

  2. ubuntu - sudo in php exec

    最近写防火墙的WEB版,需要在PHP中调用linux系统命令,但是防火墙有关的执行都需要管理员权限才能执行. 在ubuntu下,Apache2的运行账户默认是www-data,默认是不能通过sudo来 ...

  3. MD5Helper辅助类

    DES加密和解密 public class MD5Helper { ///DES加密 ///sKey public string MD5Encrypt(string pToEncrypt, strin ...

  4. 队列的实现 -- 数据结构与算法的javascript描述 第五章

    队列也是列表的一种,有不同于列表的规则. 先进先出 入队方法 出队方法 可以找到队首 可以找到队尾 可以查看队列有多长 可以查看队列是否为空 这是一个基本的需求,围绕他来实现,当然我们可以自己扩展列表 ...

  5. 关闭eclipse自动弹出console的功能

    当启动项目后,console有值时就会弹出,挺烦人的,可以如下修改

  6. 【CentOS】php编译安装gd库

    一.准备工作 使用之前服务器按源码最小化安装完nginx.php-fpm,没有安装gd库,下面介绍下gd库的安装. gd库是一个开源的图像处理库,它通过提供一系列用来处理图片的API,使其可以用来创建 ...

  7. Node&period;js&lowbar;express&lowbar;route 路由

    route 路由   (kiss my ass ヾ(ﾟ∀ﾟゞ) 请求方式        get / post /  put / delete____查 / 增 / 改 / 删 路由路径         ...

  8. Linux chattr和lsattr命令使用方法

    你是否遇到过文件或目录具有可读写权限,但是使用root用户删除.修改时提示"Operation not permitted"的情况.可能是由于chattr设置了文件的隐藏保护权限导 ...

  9. python列表与元组的用法

    python列表与元组的用法 目录: 列表的用法: 1.增   append   +    extend 2.删  del    remove 3.改   insert 4.查  index 5.反向 ...

  10. &quot&semi;is not allowed to connect&quot&semi; mysql

    好像过几次,安装mysql时,总会遇到这个问题. 每次都忘怎么解决. 这回写下来吧. 编辑 mysql数据库的 user表太麻烦了, 最简单的方法是加一个用户,以后就用这个用户登录 CREATE US ...

相关文章