Question

我已经设法创建了我需要的双边框，但是不知道如何在不降低整个标头的情况下将其长度减小到80VW。有人能帮帮我吗？

＆＃13;

header {
  position: relative;
  border-bottom-style: solid;
  border-bottom-color: #339966;
  border-bottom-width: 2px;
  padding-bottom: 2em;
}
header:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 5px;
  border-bottom: 5px solid #339966;
}

＆＃13;

<header>
  <h1>THE CODE REVIEW</h1>
  <h2>Signup for our newsletter</h2>
  <p>Get the latest news on how your code is doing right in your inbox</p>
</header>

＆＃13;

Answer 1

您可以删除header元素上的边框，并使用::before和::after伪元素创建两个边框。

header {
    position: relative;
    padding-bottom: 2em;
    /* border-bottom-style: solid; */
    /* border-bottom-color: #339966; */
    /* border-bottom-width: 2px; */
}
header::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    /* left: 0; */
    /* right: 0; */
    bottom: 6px;
    border-bottom: 5px solid #339966;
    width: 80vw;                         /* NEW */
    left: 50%;                           /* NEW */
    transform: translateX(-50%);         /* NEW */
}
header::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    /* left: 0; */
    /* right: 0; */
    bottom: 0;
    border-bottom: 2px solid #339966;
    width: 80vw;                         /* NEW */
    left: 50%;                           /* NEW */
    transform: translateX(-50%);         /* NEW */
}

<header>
    <h1>THE CODE REVIEW</h1>
    <h2>Signup for our newsletter</h2>
    <p>Get the latest news on how your code is doing right in your inbox</p>
</header>

jsFiddle

有关left和transform居中方法的说明，请参阅此处：Element will not stay centered, especially when re-sizing screen

如何减少双边框的长度？

1 个答案:

jsFiddle