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

边框是:after伪元素。它绝对定位于top，right和left

因此，如果您在top中将bottom更改为.box:after，则会将边框移至底部

    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 2

将top: 0;更改为bottom: 0;，然后将其添加到底部。

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

Answer 3

如果.box:after pseudoelement过于复杂，请使用 border-image 进行替代。

Border-image-slice将扩展CSS边框图像渐变。

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;
}

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

Answer 4

您只需更换您的css top属性

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

Answer 5

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;
 }

Answer 6

将.box:after中的顶部更改为100%，如下所示：

.box:after {
  top: 100%
}

Answer 7

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

“以及我需要修改以将其置于底部边框。” -

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

<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>

在div的一边的多色的边界

7 个答案: