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