当抱怨我的线性渐变时,我需要做些什么来缓和R#？

Question

我有这个CSS规则:

.featured .content-wrapper {
    background-color: #7ac0da;
    background-image: -ms-linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    background-image: -o-linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7ac0da), color-stop(1, #a4d4e6));
    background-image: -webkit-linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    background-image: linear-gradient(left, #7ac0da 0, #a4d4e6 100%);
    color: #3e5667;
    padding: 20px 40px 30px 40px;
}

...和R#抱怨最后一个背景图像行, Expected one of: <angle>, to, <named-color>, <system-color>, <color>, rgb(), rgba(), hsl(), hsla().

我不知道它想要什么 - 但是我如何修改那条线以安抚R#有时看起来像是戴着白手套的婆婆(不要误会我的意思 - 我爱她,无论如何)？

Answer 1

因为那不是有效的CSS.引用MDN:

Formal grammar: 
linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                  \---------------------------------/ \----------------------------/
                    Definition of the gradient line         List of color stops  

               where <side-or-corner> = [left | right] || [top | bottom]
                 and <color-stop>     = <color> [ <percentage> | <length> ]?

所以你要

background-image: linear-gradient(to left, #7ac0da 0, #a4d4e6 100%);

请参阅语法部分的历史记录,了解特定于供应商的版本为何看起来如此.

使用我的R#(7.1),特定于供应商的版本都被暗示Unknown vendor specific extension 'whatever',并且实际上并没有检查它们的函数参数的有效性.