使用 CSS 可以自定义 HTML5 中的 hr 标签的样式。可以使用如下的 CSS 规则:
- hr {
- border: 0;
- height: 1px;
- background-color: #333;
- margin: 20px 0;
- }
可以根据需要调整边框宽度、颜色、高度等样式。例如:
- hr {
- border: 1px solid #333;
- height: 1px;
- margin: 20px 0;
- }
还可以使用伪元素(例如:::before 和 ::after)来设置 HR 元素的样式。例如:
- hr::before {
- content: "";
- height: 2px;
- background-color: #333;
- display: block;
- margin-bottom: 10px;
- }
-
- hr::after {
- content: "";
- height: 2px;
- background-color: #333;
- display: block;
- margin-top: 10px;
- }
可以通过为 hr 标签添加一个 CSS 类,然后在 CSS 样式表中定义该类的样式。
例如:
HTML:
- <hr class="styled-hr">
CSS:
- .styled-hr {
- border: 1px solid blue;
- height: 2px;
- width: 50%;
- margin: 20px auto;
- }