CSS 中的 hr 厚度

在 CSS 中，<hr> 标签常常用来表示分割线，其默认样式为横线，但可以通过 CSS 属性进行更改。其中一个可以更改的属性是 height，即分割线的厚度。

语法

hr {
  height: <length> | <percentage> | inherit;
}

• <length>：表示分割线厚度的长度值，比如 2px, 5rem, 10pt 等。
• <percentage>：表示将分割线厚度设置为父容器高度的百分比，比如 30%, 50%, 100% 等。
• inherit：表示从父元素继承分割线厚度属性。

示例

设置分割线厚度为 2px

hr {
  height: 2px;
}

将分割线厚度设置为父元素高度的一半

.container {
  height: 200px;
}

.container hr {
  height: 50%;
}

继承父元素的分割线厚度属性

.container {
  height: 200px;
}

.container hr {
  height: inherit;
}

注意事项

• 值不能为负数。
• 对于不支持 <hr> 标签的浏览器，该属性可能不起作用。
• 若要更改分割线的样式（如颜色、样式等），可以使用 CSS 的 border 属性。