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

Question

在网站上，有一条蓝色的长尾巴。为了骄傲月，我想把这条尾巴变成彩虹。原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,22,37,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,22,37,1);
    box-shadow: 0 0 60px 0 rgba(16,22,37,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 样式 sheet 时，更改并没有实现。检查源显示存在无效的属性值。我尝试将代码更正为以下内容，但没有任何改变：

.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,22,37,1);
    border-bottom-width: 15px solid; 
    border-bottom-style: transparent;
    border-image-repeat: linear-gradient( 45deg, red, orange, yellow, green, blue, indigo, violet, red);
    border-image-slice: 1;
}

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

Pasted in code in source viewer that works

CSS Code with invalid property values

Answer 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, 22, 37, 1);
   box-shadow: 0 0 60px 0 rgba(16, 22, 37, 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>

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

Invalid property value for rainbow border: CSS

css

border-color

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

Invalid property value for rainbow border: CSS

css

border-color

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