CSS3背景渐变无法验证，有人可以告诉我为什么吗?里面的代码示例 [英] CSS3 Background Gradients Not Validating, Can Someone Tell Me Why? Code Example Inside
问题描述
有人可以告诉我以下CSS为什么不通过验证吗?我一直在自己做研究，没有运气.我读过的所有文档都说这是在css3中进行渐变的正确原因.
Can someone tell me why the following css is not validating? I've been trying to research this myself with no luck. All of the documentation I've read says this is the proper why to do gradients in css3.
#header {
color: white;
font-size: 12px;
font-family: Helvetica, Verdana, Arial, sans-serif;
background: black;
background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
width: 100%;
height: 35px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px;
position: fixed;
top: 0px;
z-index: 1000;
}
这些是我收到的验证错误:
These are the validation errors I'm getting:
TextArea(CSS级别3)的W3C CSS验证程序结果
W3C CSS Validator results for TextArea (CSS level 3)
对不起！我们发现以下错误(6)
Sorry! We found the following errors (6)
URI:TextArea
URI : TextArea
6 #header值错误:background-color-moz-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-moz-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
6 #header Value Error : background-color -moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -moz-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
7 #header值错误:background-color -webkit-gradient(linear，left上，左下，停色(0％，rgba(0,0,0,0.65))，color-stop(100％，rgba(0,0,0,0)))不是背景色值:-webkit-gradient(linear，left top，left bottom，color-stop(0％，rgba(0,0,0,0.65)))，color-stop(100％，rgba(0,0,0,0)))
7 #header Value Error : background-color -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.65 ) ),color-stop(100%,rgba(0,0,0,0 ) ) ) is not a background-color value : -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0.65 ) ),color-stop(100%,rgba(0,0,0,0 ) ) )
8 #header值错误:背景颜色-webkit-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-webkit-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
8 #header Value Error : background-color -webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -webkit-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
9 #header值错误:background-color-o-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-o-linear-gradient(顶部，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
9 #header Value Error : background-color -o-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -o-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
10 #header值错误:background-color-ms-linear-gradient(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:-ms-linear-gradient(顶部，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
10 #header Value Error : background-color -ms-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : -ms-linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
11 #header值错误:background-color线性梯度(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)不是背景色值:线性渐变(top，rgba(0,0,0,0.65)0％，rgba(0,0,0,0)100％)
11 #header Value Error : background-color linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% ) is not a background-color value : linear-gradient(top,rgba(0,0,0,0.65 ) 0%,rgba(0,0,0,0 ) 100% )
推荐答案
这是以下内容的重复: CSS背景渐变验证
This is a duplicate of: CSS background gradient validation
一个很好的解释是:
在现代网页设计中，有效"是关于CSS3的非常灵活的术语，开发.
"Valid" is a very fluid term in regards to CSS3 in modern web design / development.
如果您尝试在W3C的CSS3中验证此"代码验证程序，它将显示一堆解析错误.这是由于目前CSS3实现的性质，主要是因为创建CSS3渐变所需的供应商前缀.
If you tried to validate 'this' code in W3C’s CSS3 Validator, it will show a bunch of parsing errors. This is due to the nature of CSS3 implementation at the moment, and mainly because of the vendor prefixes required to create CSS3 gradients.
现在翻转方面，我们根据浏览器供应商提供的这些渐变.W3C尚未最终确定CSS3规范意味着在此之前我们不会关于CSS3的有效或无效的具体答案.我们现在所能做的就是遵循渐进增强技术，并注意浏览器供应商的指导和正确使用CSS3的实现.
Now on the flip side, we have used correct and "valid" syntax according to the browser vendors for these gradients. The fact that W3C has yet to finalize the CSS3 specifications means until then we will not have a concrete answer as to what is valid or invalid when it comes to CSS3. All we can do right now is follow progressive enhancement techniques, and pay attention to the browser vendors for direction and proper implementation of CSS3.
