网页设计时，会用到hr的各种样式，如果使用得当，将会给你的页面增色很多！

hr 属性

<hr style="width:60%;height:5px;border:5px solid #ff0000;border-top:2px dotted #0066CC;" />

<hr style="width:60%;border:5px solid #ff0000;" color=#00ffff size=20 align=left />

属性解释：

width:60%;     hr的宽度，即上图红色宽度为上一级宽度的60%

height:5px;      hr的高度，即上图中间白色部分为高度2px

border:5px solid #ff0000;    hr的边框，即上图中红色边框，宽度为5px

border-top:2px dotted #0066CC;    hr的上边框，即上图蓝色点线的2px上边框，其覆盖了红色5px的边框

dotted  点线，其它还有虚线（dashed）、实线（solid）

#0066CC  虚线的颜色

color=#00ffff  虚线的内部颜色，即上图2的蓝色

size=20  虚线的厚度，即上图2的蓝色高度

align=left  虚线的对齐方式，支持 left、center、right

简单示例

<hr style="height:2px;border:none;border-top:2px dotted #0066CC;" />

<hr style="height:0px;border:1px dotted #0066CC;" />

<hr style="height:2px;border:2px dotted #0066CC;" />

上图，构建虚线解释如下：

最上面，border-top:2px dotted #0066CC; 构建点线，高度为2px；height:2px高度为2px，不显示

中间的，border:1px dotted #0066CC; 构建点线，高度为0

最下面，border:2px dotted #0066CC; 构建上下点线，高度为2px；height:2px高度为2px，为border包含的中间白色部分

示例样式

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />

<hr style="height:1px;border:none;border-top:1px solid #555555;" />

<hr style="height:3px;border:none;border-top:3px double #f00;" />

<hr style="height:5px;border:none;border-top:5px ridge green;" />

<hr style="height:10px;border:none;border-top:10px groove skyblue;" />

border-top:10px groove skyblue;    groove  上颜色        skyblue   下颜色

本文示例效果，请参见米扑示例：

http://demo.mimvp.com/demo_hr.php

本文示例颜色，请参考米扑博客：

https://blog.mimvp.com/color/