设置hr（水平规则）标记的样式
要将水平分隔符样式的行添加到网站，一个选项包括将这些行的图像文件添加到页面中，但这需要浏览器检索并加载这些文件，这可能会对网站性能产生负面影响。您还可以使用CSS border属性添加在元素顶部或底部充当线的边框，从而有效地创建分隔线。
或者更好地使用HTML元素作为水平规则。
水平规则元素
水平规则行的默认外观不理想。为了使它们看起来更好，可以添加CSS来调整这些元素的视觉外观，使其与您希望站点的外观一致。
基本HR标记显示浏览器希望的显示方式。现代浏览器通常以100%的宽度、2像素的高度和黑色的3D边框显示未设置样式的HR标记，以创建线条。
不同浏览器的宽度和高度是一致的
web浏览器中唯一一致的样式是宽度和样式。这些定义了线的大小。如果未定义宽度和高度，则默认宽度为100%，默认高度为2像素。
在本例中，宽度为父元素的50%（请注意，下面的这些示例都包括内联样式）。在生产环境中，这些样式实际上会写入外部样式表中，以便于在所有页面中进行管理）：
style="width:50%;">在本例中，高度为2米：
style="height:2em;">改变边界可能具有挑战性
在现代浏览器中，浏览器通过调整边框来构建线条。因此，如果使用style属性删除边框，该行将在页面上消失。正如您在本例中所看到的（好吧，您将看不到任何东西，因为线条将不可见）：
style="border: none;">调整边框大小、颜色和样式使线条看起来不同，在所有现代浏览器中效果相同。例如，在本演示中，边框为红色、虚线和1px宽：
style="border: 1px dashed #000;">用背景图像画一条装饰线
为水平规则定义背景图像，而不是颜色，使其看起来完全符合您的要求，但仍在标记中按语义显示。在本例中，我们使用了一个由三条波浪线组成的图像。通过将其设置为不重复的背景图像，它在内容中创建了一个中断，看起来就像在书本中看到的：
style="height:20px;background: #fff url(aa010307.gif) no-repeat scroll center;border:none;">转变人力资源要素
使用CSS3，您还可以使您的行更加有趣。HR元素传统上是一条水平线，但通过CSS transform属性，可以更改它们的外观。HR元素上最常用的变换是更改旋转。
旋转HR元素，使其略呈对角线：
hr {-moz-transform: rotate(10deg);-webkit-transform: rotate(10deg);-o-transform: rotate(10deg);-ms-transform: rotate(10deg);transform: rotate(10deg);}或者可以旋转它，使其完全垂直：
hr {-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);}此技术根据人力资源在文档中的当前位置旋转人力资源，因此您可能需要调整定位以将其放置在所需的位置。不建议使用此选项向设计中添加垂直线，但这是一种有趣的效果。
另一种在页面上获取行的方法
有些人不使用HR元素的一件事是依赖其他元素的边界。但有时人力资源比试图建立边界更方便、更容易使用。一些浏览器的框模型问题会使设置边框变得更加棘手。
- 发表于 2021-09-05 00:09
- 阅读 ( 108 )
- 分类：IT
你可能感兴趣的文章
创建web界面：从何处开始
...档。标签界定了文档的语义内容和结构。结构化文档可以设置样式。 CSS是一种样式表语言，是页面合成器（为印刷机创建最终可打印图像）的打印样式指示的后代；在web上，CSS通常指示内容的表示，如排版和布局...
如何在mac上使用数字的条件格式
... 如果您想在Mac上设置数字的条件格式，我们将提供帮助。在学习本教程时，请注意，在数字中，该功能称为条件高亮显示，而不是条件格式。 ...
如何在google工作表中使用条件格式
条件格式是根据每个单元格中的数据自动设置电子表格中单元格样式的格式。googlesheets允许您使用条件格式来应用不同的字体、填充颜色和其他样式，使您的电子表格立即更易于阅读。 ...
使用css格式化文档以便打印
...墨水打印出彩色背景或背景图像。首先重置文档中可能已设置的这些值的所有默认值： ...
如何在css中设置背景图像
... CSS代表级联样式表。它是一种编程语言，允许您设置标记语言的样式。其中一种标记语言是HTML或超文本标记语言。HTML用于创建网站。尽管您可以使用HTML控制网站的一些样式，CSS提供了更多的控制和设计选项。 ...
身份证件(id)和css中的类(class in css)的区别
...类(class in css)的区别 定义 id是CSS中的选择器，用指定的id设置元素的样式，而class是CSS中的选择器，用指定的类设置选定元素的样式。 语法 id语法是#id{css declarati***；}。类语法是.class{css声明；} 使用 此外，id的用法是将样式应用...
如何使用css设置xml文档的样式(style xml documents with css)
创建XML文档、编写DTD并使用浏览器对其进行解析都很好，但是查看文档时文档将如何显示？XML不是一种表示语言。用XML编写的文档将完全没有格式。 如何查看xml 在浏览器中查看XML的关键是级联样式表。样式表允许您定义XML...
不带结束标记的html单例标记
...不要与“hyperlink”或锚（<a>）标记混淆，此链接用于设置文档和外部资源之间的链接。例如，使用它链接到外部CSS文件。 <meta>：meta标记是“关于内容的信息”。它们位于文档的头部，用于向浏览器传递页面信息。有许...
什么是id属性？(the id attribute?)
...的功能。因为它们是唯一的，所以在使用ID属性进行样式设置时，您将只对网页上的一个项目进行样式设置。使用ID进行样式设置的缺点是，它具有非常高的特殊性，如果您以后在样式表中出于某种原因需要重写样式，那么这将...
如何使用span和div html元素(use the span and div html elements)
...标签： <div>contents of div</div> 如果要使用CSS设置此区域的样式，可以在开始div标记中添加ID选择器： <div id="myDiv"> 或者，您可以添加一个类选择器： <div class="bigDiv"> 然后可以在CSS或JavaScript中使用这...
0 篇文章
