如何在正文设置为77%的情况下将边框扩展到全宽

在正文设置为77%的情况下将边框扩展到全宽，可以使用CSS的伪元素和绝对定位来实现。

首先，在正文的CSS样式中，将边框的宽度设置为所需的厚度，例如2px，并将边框的颜色设置为所需的颜色。

然后，在正文的CSS样式中，将容器的position属性设置为relative，以便伪元素可以相对于容器进行定位。

接下来，使用CSS的::before伪元素来创建一个扩展边框的虚拟元素。通过设置::before伪元素的content属性为空字符串，并将宽度设置为100%，高度设置为100%，position属性设置为absolute，并将top和left属性都设置为0，可以使得这个虚拟元素覆盖整个容器。

最后，通过调整::before伪元素的z-index属性，使其位于正文内容之下，从而实现边框的扩展效果。

以下是一个示例的代码：

<style>
.container {
  position: relative;
  width: 77%;
  margin: 0 auto;
  border: 2px solid #000;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  z-index: -1;
}
</style>

<div class="container">
  <p>这是正文内容。</p>
</div>

在这个示例中，.container是正文的容器，通过设置width: 77%使其宽度为正文的宽度。边框的宽度和颜色可以根据需要进行调整。通过::before伪元素创建的虚拟元素可以扩展边框到整个容器。

注意，这只是一种实现边框扩展到全宽的方法，具体的实现方式可以根据实际情况进行调整。