时间戳

首页 > 解决方案 > 彩虹边框的属性值无效：CSS

css - 彩虹边框的属性值无效：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,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 样式表时，这些更改并没有实现。检查源发现存在无效的属性值。我尝试将代码更正为以下内容，但没有任何改变：

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

任何帮助将不胜感激。

粘贴在有效的源代码查看器中的代码中

具有无效属性值的 CSS 代码

标签： cssborder-color

解决方案

尝试：

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

推荐阅读