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/

有什么主意如何只显示两个div之间的垂直分隔符和所有底部的底部边框？

谢谢

Answer 1

您有两件事要解决。

在两侧但以相同的渐变绘制边框
通过nth-child（）选择器选择右侧的框

由于边界图像的宽度很小，因此可以像对角线一样绘制渐变。从顶部角到相对的底部角重复一次。可能是linear-gradient(to bottom left, white, #efedf4, white, #efedf4, white)。

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

指定四个位置后，它们将按从上，右，下和左的顺序（沿顺时针方向）测量切片

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 | slice | width | outset | repeat */

关于nth-child（）选择器，您可以使用计数器CSS来更好地了解每个孩子的站立位置。

.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更好，每行的每个框都将是相同的高度。

CSS两列布局+梯度分离

1 个答案: