CSS 两栏布局+渐变分离

Question

我试图显示两列之间的梯度垂直分隔，以及 div 之间的底部水平梯度分隔。 以下代码 (scss) 不显示底部边框:

.col-container {
    .column-box {
        border-width: 2px;
        border-style: solid;
        border-image: linear-gradient(to right, white, #efedf4, white) 1 stretch;
        min-height: 200px;
    }
    & > div:nth-child(odd)  {
        border-width: 2px;
        border-style: solid;
        border-image: linear-gradient(to bottom, white, #efedf4) 0 90%; 
     }}

而下面的代码只显示下边框:

.col-container {
    .column-box {
        border-width: 2px;
        border-style: solid;
        border-image: linear-gradient(to right, white, #efedf4, white) 1 stretch;
        min-height: 200px;
    }}

这是代码，您会看到左边的 div 失去了它的底部边框: https://jsfiddle.net/0nsvzqxg/

知道如何只显示 2 个 div 和所有 div 的底部边框之间的垂直分隔符吗？

谢谢

Answer 1

你有两件事要解决。

• 在两侧绘制边框，但使用相同的渐变

• 通过 nth-child() 选择器选择正确的框

由于边框图像的宽度很小，所以可以像对 Angular 线一样绘制渐变。从顶 Angular 到对面的底 Angular ，重复一次。它可以是线性渐变(到左下角，白色，#efedf4，白色，#efedf4，白色)。

当您需要绘制一个或两个边框时，您需要更新每个边框的 slice 值。参见 https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

When four positions are specified, they create slices measured from the top, right, bottom, and left in that order (clockwise)

div {
  border-width: 2px;
  border-style: solid;
  border-image: linear-gradient(to bottom left, red, blue, red, blue, red)1 / 2px 2px 2px 2px stretch;
  /* what would be gradient image */
  background: linear-gradient(to bottom/* or top */ left/* or right*/ , blue, red, blue, red, blue);
  box-shadow: inset 0 0 0 2px white;/* break border from background */
  
  /* demo purpose */
  height: 50vh;
  width: 50vw;
  padding: 1em;
  color: white;
}




html,
div {
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  margin: 1em;
  padding: 1em;
}

html {
  min-height: 100vh;
}

/* end demo */

<div>
  <p>To figure out the gradient image needed for the border, you may draw it in the background to tune it</p>
  <p> from horizontal / vertical to diagonal, it needs to be repeated at least once.</p>
</div>

---

注意:速记值:border-image:/* source |切片 |宽度 |开始|重复 */

---

关于 nth-child() 选择器，您可以使用计数器 CSS 来更好地查看每个 child 的位置。

.col-container {
  counter-reset: box
}

.column-box:nth-child(odd) {
  color: tomato
}

.column-box::before {
  counter-increment: box;
  content: 'child N°:'counter(box)' ';
  color: green
}

<div class="col-container">
  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>
  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

一旦放在一起，它可以是:

.col-container {
  overflow: auto;
}

.col-container > * {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

.col-container .column-box {
  border-width: 2px;
  border-style: solid;

  border-image: linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white)
    2/ 0 0 2px 0 stretch;
  min-height: 30vh;
}
.col-container > div:nth-child(odd) {
  border-width: 2px;
  border-style: solid;

  border-image: linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white)
    2/0 2px 2px 0;
}

<div class="col-container">
  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>
  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>

  <div class="column-box">
    <div class="cover">
      Image
    </div>
  </div>
</div>

---

注意:flex + flex-wrap 将是比 float 更好的选择，每行的每个框将具有相同的高度。