轉換為CSS3漸變

Question

我是剛接觸CSS3（特別是漸變色）的人。 如何將以下HTML / CSS編碼邊框轉換為基於CSS3的漸變邊框（即不使用圖片）

我想從轉換

普通CSS邊框/背景色

至

漸變盒

寬度/高度大約在上面的img中...我需要知道如何根據第二個無花果獲得漸變？

Answer 1

此鏈接應為您提供幫助。 您將在此處找到漸變的語法。

適用於所有主要瀏覽器的版本是：

  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); 
  background-image: -webkit-linear-gradient(top, #444444, #999999); 
  background-image:    -moz-linear-gradient(top, #444444, #999999); 
  background-image:     -ms-linear-gradient(top, #444444, #999999); 
  background-image:      -o-linear-gradient(top, #444444, #999999); 
  background-image:         linear-gradient(to bottom, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');

…而#444444是漸變頂部的顏色，而#999999是漸變底部的顏色。

不同的“供應商前綴”可確保漸變可在不同的瀏覽器中使用，因為目前並不是所有瀏覽器都支持“默認”語法。 filter -property將使漸變在Internet Explorer 8及更低版本中起作用。 但這有一些缺點（性能方面也如此）。 如果確實需要，請使用它。

編輯：線性漸變的語法已更改。 規范語法：

background-image: linear-gradient(to bottom, #444444, #999999);

我也更改了此內容，因此每個人都可以復制它。

Answer 2

您不希望看到正在使用的顏色，而是想做這樣的事情

.class{
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000));
    background: -moz-linear-gradient(top, #fff, #000);
}

這是一個可能有幫助的工具：

http://gradients.glrzad.com/

Answer 3

最好的地方如下：

CSS3漸變

Answer 4

CSS漸變很酷。 但是你有一個問題 。 在ie9中使用背景漸變時。 您不能使用其他CSS3的邊框半徑。 例如，背景濾鏡屬性很爛。 我對此有更好的解決方案。 那解決了ie9中的問題。

使用此工具可以創建漸變： http : //www.colorzilla.com/gradient-editor/使用此工具可以為ie9創建SVG： http ： //ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default html的

現在我們有了以下代碼：

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1OCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNDQ0NDQ0IiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjOTk5OTk5IiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNTgpIiAvPgo8L3N2Zz4=);
background: #444444; /* Old browsers */
background: -moz-linear-gradient(top, #444444 0%, #999999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #444444 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #444444 0%,#999999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #444444 0%,#999999 100%); /* IE10+ */
background: linear-gradient(top, #444444 0%,#999999 100%); /* W3C */