在div的一边的多色的边界

Question

我发现this example显示了我想做的事情，但它位于div的顶部。我不明白CSS中的内容是什么告诉它在顶部以及我需要修改它以使其在底部边框上。以为它会在之前切换到之后但是没有用

body {
  background: #ccc;
}

.box {
  text-align: center;
  position: relative;
  line-height: 100px;
  background: #fff;
  height: 100px;
  width: 300px;
}

.box:after {
  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  position: absolute;
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}

<div class="box">Div</div>

Answer 1

边界是qazxsw poi伪元素。它完全定位于qazxsw poi，:after和top

所以，如果你在right中将left更改为top，它会将边框移到底部

bottom

.box:after

Answer 2

将

    body {
      background: #ccc;
    }
    
    .box {
      text-align: center;
      position: relative;
      line-height: 100px;
      background: #fff;
      height: 100px;
      width: 300px;
    }
    
    .box:after {
      background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
      position: absolute;
      content: '';
      height: 4px;
      right: 0;
      left: 0;
      bottom: 0;
    }

更改为 <div class="box">Div</div>，它会将其添加到底部。

原因是因为它是绝对定位的，并且顶部/右侧/底部/左侧告诉元素应该放置在哪里。

Answer 3

你只需要替换你的css top属性

top: 0;

Answer 4

bottom: 0;

Answer 5

如果

.box:after { 
   bottom: 0;//it is replaced by top:0;
 }

对你来说太复杂了，这里有一个使用border-image的替代方案。

body {
 background: #ccc;
}

 .box {
 text-align: center;
 position: relative;
 line-height: 100px;
 background: #fff;
 height: 100px;
 width: 300px;
 }

 .box:after {
 background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, 
 #e84f47 50%, #e84f47 75%, #65c1ac 75%);
 position: absolute;
 content: '';
 height: 4px;
 right: 0;
 left: 0;
 top: auto;
 bottom:0;
 }

将扩展CSS边框图像渐变。

.box:after pseudoelement

Border-image-slice

Answer 6

“CSS中的内容告诉它在顶部” - 右：0;左：0;顶部：0;具有元素的绝对位置

“以及我需要修改以使其在底部边界上。” -

将元素的位置更改为 - 右：0;左：0;底部：0;

body {
  background: #ccc;
}

.box {
  text-align: center;
  position: relative;
  line-height: 100px;
  background: #fff;
  height: 100px;
  width: 300px;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(to right, #bcbcbc 25%, #ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  border-image-slice: 1;
}

Answer 7

将<div class="box">Div</div>的顶部更改为

<div class="box">Div</div>

 <style>  body { background: #ccc}
         .box {
             text-align: center;
             position: relative;
             line-height: 100px;
              background: #fff;
             height: 100px;
            width: 300px;
               }

        .box:after {
              background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, 
          #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
              position: absolute;
             content: '';
             height: 4px;
           right: 0;
          left: 0;
          bottom: 0;
            }
    </style>

，如下所示：

.box:after