伪元素主体边框

Question

我正在尝试为我的网站创建一个正文边框，该边框在徽标顶部附近有一个间隙，但在底部完全闭合。我似乎只能做其中之一。

这是我一直采用的方法。带有 before/after 伪元素的简单主体包装器。 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

我采用了一种不同的方法，即对 'borderWrap' 应用常规边框并将页眉居中，然后应用负上边距和纯白色背景。

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>

伪元素主体边框

pseudo element body border

html

css

border

pseudo-element