爲一個HTML.ActionLink按鈕線性漸變內聯CSS無法識別的Chrome

Question

我試圖漸變背景顏色添加到我的行動鏈接按鈕：

<p>@Html.ActionLink("Call Cell Phone", "Call", new { id = Model.Id, number = Model.CellNumber }, new { @class = "btn btn-default", @style = "background-color:-webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);", onclick = "Call('PrimaryNumber');" })</p> 

它生成到：

<a class="btn btn-default" href="/Person/Call/2?number=113-456-789" onclick="Call('PrimaryNumber');" style="background-color:-webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);">Call Cell Phone</a> 

和Chrome表明它不明白梯度部分：

我用corolzilla生成這個漸變。我也有其他版本。這兩個描述爲鉻

background: #f8ffe8; /* Old browsers */ 
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0); /* IE6-9 */ 

如何修復此漸變，使Chrome識別它。

Answer 1

linear-gradient()函數應該創建一個<image> CSS data type。您應該在background或background-image屬性中使用該功能。

例如：

background-image: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);