Html div一侧的多色边框

我发现它显示了我想做什么，但它在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>

正文{
背景：#ccc；
}
.盒子{
文本对齐：居中；
位置：相对位置；
线高：100px；
背景：#fff；
高度：100px；
宽度：300px；
}
.盒子：之后{
背景：线性梯度（向右，bcbcbc 25%，ffcd02 25%，ffcd02 50%，e84f47 50%，e84f47 75%，65c1ac 75%）；
位置：绝对位置；
内容：''；
高度：4px；
右：0；
左：0；
排名：0；
}
Div

将

框中的顶部：在
之后更改为
100%
如下：

.box:after {
  top: 100%
}

将
.box:after
中的top更改为
100%
如下：

.box:after {
  top: 100%
}

边框是
：在
psuedo元素之后。它绝对位于
顶部
、
右侧
和
左侧

因此，如果在
框中将
顶部
更改为
底部
。框：在
之后，它会将边框移动到底部


正文{
背景：#ccc；
}
.盒子{
文本对齐：居中；
位置：相对位置；
线高：100px；
背景：#fff；
高度：100px；
宽度：300px；
}
.盒子：之后{
背景：线性梯度（向右，bcbcbc 25%，ffcd02 25%，ffcd02 50%，e84f47 50%，e84f47 75%，65c1ac 75%）；
位置：绝对位置；
内容：''；
高度：4px；
右：0；
左：0；
底部：0；
}
Div
边框是
：在
psuedo元素之后。它绝对位于
顶部
、
右侧
和
左侧

因此，如果在
框中将
顶部
更改为
底部
。框：在
之后，它会将边框移动到底部


正文{
背景：#ccc；
}
.盒子{
文本对齐：居中；
位置：相对位置；
线高：100px；
背景：#fff；
高度：100px；
宽度：300px；
}
.盒子：之后{
背景：线性梯度（向右，bcbcbc 25%，ffcd02 25%，ffcd02 50%，e84f47 50%，e84f47 75%，65c1ac 75%）；
位置：绝对位置；
内容：''；
高度：4px；
右：0；
左：0；
底部：0；
}
Div
Change
top:0至
底部：0并将其添加到底部

原因是它是绝对定位的，上/右/下/左告诉元素应该定位在哪里。
Change
top:0至
底部：0并将其添加到底部

原因是它是绝对定位的，上/右/下/左告诉元素应该定位在哪里。
如果
.box:在伪元素
对您来说太复杂之后，这里有一个替代方法使用边框图像

边框图像切片
将扩展CSS边框图像渐变


正文{
背景：#ccc；
}
.盒子{
文本对齐：居中；
位置：相对位置；
线高：100px；
背景：#fff；
高度：100px；
宽度：300px；
边框底部：4px实心透明；
边界图像：线性渐变（向右，#bcbcbc 25%，#ffcd02 25%，#ffcd02 50%，#e84f47 50%，#e84f47 75%，#65c1ac 75%）；
边界图像切片：1；
}
Div
如果
.box:pseudoelement
对您来说太复杂之后，这里有一个替代方法使用边框图像

边框图像切片
将扩展CSS边框图像渐变


正文{
背景：#ccc；
}
.盒子{
文本对齐：居中；
位置：相对位置；
线高：100px；
背景：#fff；
高度：100px；
宽度：300px；
边框底部：4px实心透明；
边界图像：线性渐变（向右，#bcbcbc 25%，#ffcd02 25%，#ffcd02 50%，#e84f47 50%，#e84f47 75%，#65c1ac 75%）；
边界图像切片：1；
}
Div
您只需替换css top属性

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

您只需替换css top属性

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

“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
正文{背景：#ccc}
.盒子{
文本对齐：居中；
位置：相对位置；
线高：100px；
背景：#fff；
高度：100px；
宽度：300px；
}
.盒子：之后{
背景：线性梯度（向右，#BCBC 25%，#ffcd02 25%，
#ffcd02 50%、e84f47 50%、e84f47 75%、65c1ac 75%；
位置：绝对位置；
内容：''；
高度：4px；
右：0；
左：0；
底部：0；
}
“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
正文{背景：#ccc}
.盒子{
文本对齐：居中；
位置：相对位置；
线高：100px；
背景：#fff；
高度：100px；
宽度：300px；
}
.盒子：之后{
背景：线性梯度（向右，#BCBC 25%，#ffcd02 25%，
#ffcd02 50%、e84f47 50%、e84f47 75%、65c1ac 75%；
位置：绝对位置；
内容：''；
高度：4px；
右：0；
左：0；
底部：0；
}
您是否尝试过将
顶部：0
替换为
底部：0
？