CSS（也許與指南針）：跨瀏覽器梯度

我想在CSS（可能通過Compass）中獲得適用於包括IE7 +在內的所有主流瀏覽器的漸變。有沒有簡單的方法來做到這一點（沒有寫很多代碼，沒有自定義圖像文件）？CSS（也許與指南針）：跨瀏覽器梯度

我看着Compass的gradient mixin，但它不適用於Internet Explorer。

任何想法？（它並不需要是指南針 - 我很高興安裝別的東西。）

編輯：我想獲得一些框架產生像什麼Blowsie張貼的被測試的代碼（如指南針？）跨瀏覽器。基本上像我提到的Compass gradient mixin，但有IE支持。（我有點擔心只是滾動我自己的SCSS mixin並粘貼到Blowsie的代碼塊中，因爲我沒有測試過它，也沒有資源這樣做。）

來源

2011-04-14 Jo Liss

工作我只是注意到目前的Compass beta（0.11.beta.6）支持在compass/css3/images模塊中生成IE漸變（它取代了之前的漸變模塊），因此您可以使用總共兩條短命令生成漸變：

@import "compass/css3/images"; 
@import "compass/utilities/general/hacks"; /* filter-gradient needs this */ 

.whatever { 
    /* IE; docs say this should go first (or better, placed in separate IE-only stylesheet): */ 
    @include filter-gradient(#aaaaaa, #eeeeee); 
    /* Fallback: */ 
    background: #cccccc; 
    /* CSS 3 plus vendor prefixes: */ 
    @include background(linear-gradient(top, #aaaaaa, #eeeeee)); 
}

這產生CSS以下襬：

.whatever { 
    *zoom: 1; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')"; 
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE'); 
    background: #cccccc; 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee)); 
    background: -moz-linear-gradient(top, #aaaaaa, #eeeeee); 
    background: -o-linear-gradient(top, #aaaaaa, #eeeeee); 
    background: linear-gradient(top, #aaaaaa, #eeeeee); 
}

我想我寧願有IE和非IE梯度代碼在一個呼叫，但是由於IE的DXImageTransform梯度函數是相當有限的，這是可能不可能。

來源

2011-04-14 21:37:41

- 關於IE9？ – 2012-01-19 15:39:49

更新：[聰明的人說]（http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/）你不應該在IE6-IE8上製作漸變，因爲它們會導致性能和佈局問題。所以現在我可能會忽略'filter-gradient'這一行。 – 2012-05-03 18:25:39

- 那麼你對IE漸變，圖像做什麼？ – 2012-05-04 06:08:59

-1

儘管漸變的複雜性有限，他們足夠複雜，需要你認爲「很多代碼」。

考慮：

起始色，終了色和一方和另一方
之間轉變的「臺階」
每個步驟的寬度/高度的數量所需的十六進制數學
由於沒有純粹的CSS方式來做這件事，它意味着渲染HTML，每種顏色/步驟一個元素，而不會搞亂現有的HTML

所以，不，沒有一個插件可以爲你做所有這些工作，它需要一些代碼或圖像。

來源

2011-04-14 14:53:27

其實，我認爲你不必爲此擁有HTML代碼。例如，請參閱http://webdesignerwall.com/tutorials/cross-browser-css-gradient以獲取相關信息。（這對我的口味來說太冗長了，所以我正在尋找一種通過CSS框架以編程的方式來做到這一點。） – 2011-04-14 14:59:37

我試圖做的一點是沒有簡單的答案。你想要一個，但沒有一個。這並不能使我的回答值得贊成。 – 2011-04-14 15:04:33

雖然「沒有純粹的CSS方式做這件事」不夠準確（CSS 3具有漸變支持） - 並且建議生成HTML（或使用JS），而不是爲那些不需要編寫額外的CSS的瀏覽器支持這是值得懷疑的建議，在我看來。 – 2011-04-14 16:35:54

我使用所有的瀏覽器梯度代碼..

  background: #0A284B; 
      background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887)); 
      background: -moz-linear-gradient(top, #0A284B, #135887); 
      background: -o-linear-gradient(#0A284B, #135887); 
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887'); 
      zoom:1;

你需要指定的高度或縮放：1的hasLayout應用到元素爲這即

來源

2011-04-14 15:44:48 Blowsie

CSS（也許與指南針）：跨瀏覽器梯度

回答

相關問題