[分享]css中如何设置hr属性

CSS中的hr属性可以用来设置水平分割线的样式，如粗细、颜色、长度等。

hr {
  border: none; /*去除默认边框*/
  height: 2px; /*设置高度*/
  margin: 20px 0; /*设置上下外边距*/
  background-color: #ccc; /*设置背景颜色*/
} 

在上面的代码中，我们使用了hr选择器来选择水平分割线，然后设置了其无边框、高度、上下外边距和背景颜色等属性。

如果想要设置分割线的颜色为红色，可以像下面这样修改代码：

hr {
  border: none;
  height: 2px;
  margin: 20px 0;
  background-color: red;
} 

这样，分割线的颜色就变成了红色。

除了背景颜色和高度外，我们还可以设置分割线的样式和长度。

例如，给分割线加上虚线样式：

hr {
  border: none;
  height: 2px;
  margin: 20px 0;
  border-style: dashed; /*加入虚线样式*/
  background-color: #ccc;
} 

通过设置border-style属性，我们可以将实线样式改为虚线样式。

对于长度的设置，我们可以使用百分比或像素值来进行设置。

如下代码所示，我们将分割线的长度设置为80%：

hr {
  border: none;
  height: 2px;
  margin: 20px 0;
  background-color: #ccc;
  width: 80%; /*将长度设置为80%*/
} 

这样，分割线的长度就会根据父元素的宽度自适应。

总之，在CSS中，我们可以灵活地设置分割线的样式，通过不同的属性设置，让分割线更加美观。