问题
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:
W3C CSS Validator results for TextArea (CSS level 3)
Sorry! We found the following errors (6)
URI : TextArea
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 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 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 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 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 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% )
回答1:
This is a duplicate of: CSS background gradient validation
A good explanation is:
“Valid” is a very fluid term in regards to CSS3 in modern web design / development.
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.
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.
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/comment-page-1/#comment-243334
回答2:
Vendor specific extensions do not validate. Also, you may need to change the W3C validation service options to change the CSS profile level, as shown in this link.
Anyway, I wouldn't worry about my CSS3 declarations not validating, since validation is just a guide for you to correct possible code errors.
回答3:
make sure you have the correct option set for "profile". It should be css level 3. And the validator doesn't really support vendor specific css.
来源：https://stackoverflow.com/questions/8647904/css3-background-gradients-not-validating-can-someone-tell-me-why-code-example