如何解决彩虹边框的无效属性值: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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。