用HR标签在网页上制作有趣的线条
如果您需要为您的网站添加水平分隔线样式的线条，您可以选择一些选项。 您可以将这些行的实际图像文件添加到您的页面，但这需要您的浏览器检索并加载这些文件，这可能会对网站性能产生负面影响。
您可以使用CSS边框属性添加边框 ，作为元素顶部或底部的线条，有效地创建分隔线。
最后，您可以使用横向规则的HTML元素 -
横向规则元素
如果你曾经在网页上放过一个元素，你可能会发现这些行显示的默认方式并不理想。 这意味着您需要转向CSS来调整这些元素的外观以符合您希望网站的外观。
基本的HR标签以浏览器想要显示的方式显示。 现代浏览器通常显示宽度为100％，高度为2px的未标注HR标签，以及黑色的3D边框以创建该线。
下面是一个标准HR元素的例子，或者您可以在这张图片中看到现代浏览器中未被塑造的HR的外观。
宽度和高度在浏览器中保持一致
在Web浏览器中唯一一致的样式是宽度和样式。 这些定义了线路的大小。 如果您未定义宽度和高度，则默认宽度为100％，默认高度为2px。
在这个例子中，宽度是父元素的50％（注意下面的这些例子都包含内联样式，在生产环境中，这些样式实际上会写在外部样式表中，以便在整个页面中进行管理）：
风格= “宽度：50％;”>
在这个例子中，高度是2em：
风格= “高度：2em的;”>
改变边界可能具有挑战性
在现代浏览器中，浏览器通过调整边框来构建线条。 因此，如果您使用style属性移除边框，该行将消失在页面上。 正如你所看到的（当然，你不会看到任何东西，因为在这个例子中线条是不可见的）：
style =“border：none;”>
调整边框的大小，颜色和样式会使线条看起来不同，并且在所有现代浏览器中都具有相同的效果。 例如，在这个演示中，边框是红色，虚线和1px宽：
style =“border：1px dashed＃000;”>
但是，如果您更改边框和高度，则在非常过时的浏览器中，这些样式与现代浏览器中的样式略有不同。 正如你在这个例子中看到的那样，如果你在IE7和IE7以下浏览它（一个浏览器已经过时并且不再被微软支持），那么就会出现一条斜线，不会在其他浏览器中显示（包括IE8及更高版本） ：
style =“height：1.5em; width：25em; border：1px solid＃000;”>
那些复古的浏览器在今天的网页设计中确实不太受关注，因为它们在很大程度上已经被更现代的选择所取代。
用背景图像制作装饰线
您可以为您的HR定义背景图像，以使其看起来完全符合您的需求，但仍可在语义上显示在您的标记中，而不是颜色。
在这个例子中，我们使用了三条波浪线的图像。 通过将其设置为不重复的背景图像 ，它会在内容上创建一个与您在书中看到的几乎相同的内容：
style =“height：20px; background：#fff url（aa010307.gif）no-repeat scroll center; border：none;”>
转化HR元素
使用CSS3，你也可以让你的线条更有趣。 HR元素传统上是一条水平线 ，但通过CSS转换属性，您可以改变它们的外观。 HR元素最喜欢的转换是改变旋转。
您可以旋转您的HR元素，使其略微倾斜：
hr {
-moz-transform：rotate（10deg）;
-webkit-transform：rotate（10deg）;
-o-transform：rotate（10deg）;
-ms-transform：rotate（10deg）;
转换：旋转（10deg）;
}
或者你可以旋转它，使它完全垂直：
hr {
-moz-transform：旋转（90deg）;
-webkit-transform：旋转（90deg）;
-o-transform：旋转（90deg）;
-ms-transform：rotate（90deg）;
转换：旋转（90deg）;
}
请记住，这会根据文档中当前位置来旋转HR，因此您可能需要调整定位以将其放置在您想要的位置。 不建议使用它来为设计添加垂直线条，但它是获得有趣效果的一种方式。
另一种方式获得您的网页上的线条
有些人不使用人力资源元素，而是依靠其他元素的边界。 但是有时候HR比尝试设置边界更方便，更容易使用。 一些浏览器的盒子模型问题可以使设置边界更加棘手。