css分割线怎么变短

在美化一个网站页面时，有时候我们需要使用一些分割线来增加页面的美感和可读性，而css中的分割线也是非常实用的一个工具。本文将介绍如何使用css来控制分割线的长度。

hr {
  width: 50%;
  margin: auto;
}

以上代码中的“hr”就是用来表示分割线的标签，这里我们使用的是css样式表来对它进行样式的控制。其中，width: 50%; 表示分割线的长度为当前所在容器的50%，这里的容器指的是“hr”所在的容器；margin: auto; 表示将这条分割线在水平居中显示。

有时候我们需要将分割线的长度变得更短。此时，我们可以通过控制“hr”的宽度来实现。以下是一些常见的控制方法：

hr {
  width: 30%;
  margin: auto;
}

这段代码表示分割线的长度为当前所在容器的30%。

hr {
  width: 20px;
  margin: auto;
}

这段代码表示分割线的长度为20个像素。

hr {
  border: 1px solid black;
  width: 50px;
  margin: auto;
}

这段代码表示分割线的长度为50个像素，并且边框粗细为1像素，颜色为黑色。

通过以上控制方法，我们可以快速地将分割线的长度变得更短，以美化我们的网站页面。