[分享]css中hr的属性值

CSS中的hr标签代表水平分隔线，主要用于分割内容。除了可以用默认的样式外，我们还可以通过改变属性值来自定义分隔线的样式。hr { / 宽度 / width: 50; / 高度 / height: 2...

CSS中的hr标签代表水平分隔线，主要用于分割内容。除了可以用默认的样式外，我们还可以通过改变属性值来自定义分隔线的样式。

hr {
  /* 宽度 */
  width: 50%;
  /* 高度 */
  height: 2px;
  /* 颜色 */
  color: red;
  /* 边框 */
  border: none;
  /* 样式 */
  border-style: dashed;
  /* margin */
  margin-top: 20px;
  margin-bottom: 20px;
} 

上述样式代码可以让水平分隔线宽度占据整个容器的50%，高度为2像素，颜色为红色，边框为无，样式为虚线，上下边界距离容器20像素。

需要注意的是，hr标签并不是一个块级元素，而是一个单独的自闭合标签，因此无法通过其包裹内部元素来改变其样式。

通过掌握hr标签的属性值，我们可以让网页视觉上更美观，也为内容之间的分割增加了一种有效的方式。