彩虹边框的无效属性值：CSS

问题描述

在网站上，有一条长长的蓝色尾巴。为了骄傲月，我想把这条尾巴变成彩虹。原始CSS代码如下：

.site-header {
    background-color: #101625;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  border-bottom: 15px solid #375778;
  -webkit-Box-shadow: 0 0 60px 0 rgba(16,22,37,1);
    Box-shadow: 0 0 60px 0 rgba(16,1);
}

本来，当我在模拟尾巴的样子时，我会检查网站的来源，并在上面添加以下代码。然后它会工作并将尾巴更改为彩虹：

.site-header {
    background-color: #101625;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  border-bottom: 15px solid #375778;
  -webkit-Box-shadow: 0 0 60px 0 rgba(16,1);background-color: #101625;
border-bottom: 15px solid transparent;
border-top: 0px solid transparent;
border-left: 0px;
border-right: 0px;
border-image: linear-gradient( 45deg, red, orange, yellow, green, blue, indigo, violet, red);
border-image-slice: 1;
}

我知道现在有一些重复代码，但是这个解决方案是有效的。但是，当我去更新真正的 CSS 样式表时，更改没有实现。检查源发现存在无效的属性值。我尝试将代码更正为以下内容，但没有任何改变：

.site-header {
    background-color: #101625;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    border-bottom: 15px solid #375778;
  -webkit-Box-shadow: 0 0 60px 0 rgba(16,1);
    border-bottom-width: 15px solid; 
    border-bottom-style: transparent;
    border-image-repeat: linear-gradient( 45deg, red);
    border-image-slice: 1;
}

如有任何帮助，我们将不胜感激。

Pasted in code in source viewer that works

CSS Code with invalid property values

解决方法

试试：

.site-header {
   background-color: #101625;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 999;
   border-bottom: 15px solid #375778;
   -webkit-box-shadow: 0 0 60px 0 rgba(16,22,37,1);
   box-shadow: 0 0 60px 0 rgba(16,1);
   border-bottom-width: 15px solid;
   border-bottom-style: transparent;
   border-image: repeating-linear-gradient( 45deg,red,orange,yellow,green,blue,indigo,violet,red);
   border-image-slice: 1;
}

<div class="site-header"></div>