Question

我试图为我的网站创建一个身体边框，在徽标的顶部附近有一个间隙，但在底部完全关闭。我似乎只能做一个或另一个。

以下是我要找的内容，Body Border example：

这是我采取的方法。一个简单的正文包装器，带有psuedo元素之前/之后。 HTML

 <html>
 <body>
   <div class="borderWrap>
     <header> Logo resides here </header>
     <main> content goes here </main>
   </div>
 </body>
 </html>

CSS

  .borderWrap{position: relative; }

    .borderWrap:after, .borderWrap:before {
        border: 0.125em solid ; 
        bottom: 20px;    
        content: '';
        position: absolute;
        top: 35px;
        width: 40.5%;
        bottom: -50px;
        }

    .borderWrap:after {
        border-left: none;
        right: 40px;
        }

    .borderWrap:before {
        border-right: none;
        left: 40px;
        }

这给了我一个动态的边框，但是它仍然在底部留下了空隙。我该如何关闭呢？我应该一起使用不同的方法吗？

Answer 1

我采取了一种不同的做法，只是将常规边框应用于＆＃39; borderWrap＆＃39;并在其中居中标题，然后应用负上边距和纯白色背景。

https://jsfiddle.net/partypete25/xvhb4kuf/

.borderWrap {
    position: relative;
    margin:35px auto 20px;
    width:81%;
    border: 0.125em solid;
}
header {
    width:80px;
    background:#fff;
    margin:-20px auto 0;
}

Answer 2

以下是使用伪元素进行此操作的一种方法。

您可以使用calc(50% + 40px)来控制白色间隙的宽度，例如，40px是所需间隙宽度的半宽，使用绝对定位伪元素的左右偏移量的此值。

如果您不想使用CSS calc函数，只需使用偏移的百分比值即可简化操作。

这种方法的优点是，如果你有任何背景颜色或图像，它们将显示在顶部边框的间隙。

在我的示例中，我将说明如何创建边框。如何在布局中使用它将取决于您如何构建页面，但方法是相同的。

.borderWrap {
  position: relative;
  height: 400px;
  border: 2px solid black;
  border-top-width: 0;
}
.borderWrap:before, .borderWrap:after {
  content: '\A0';
  border-top: 2px solid blue;
  position: absolute;
  top: 0;
}
.borderWrap:before {
  left: 0;
  right: calc(50% + 40px);
}
.borderWrap:after {
  right: 0;
  left: calc(50% + 40px);
}

<div class="borderWrap"></div>

伪元素体边界

2 个答案: