WebKit從圖像梯度

Question

有誰知道是否有一個工具將拍攝圖像（.png，.gif等）並輸出圖像包含的漸變？

我真的很想在css中重新創建這個圖像。看起來像是線性和徑向漸變的混合，並且超出了我的css技能

Answer 1

開始使用這個工具 http://gradients.glrzad.com/，然後閱讀有關徑向漸變這裏使其徑向http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

你可以走這麼遠與工具：

-webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0, rgb(68,214,254)), 
    color-stop(0.49, rgb(53,150,230)), 
    color-stop(0.51, rgb(123,180,236)), 
    color-stop(1, rgb(255,255,255)) 
) 
-moz-linear-gradient(
    center bottom, 
    rgb(68,214,254) 0%, 
    rgb(53,150,230) 49%, 
    rgb(123,180,236) 51%, 
    rgb(255,255,255) 100% 
) 

然後使其徑向，只有Mozilla瀏覽器這裏

-moz-radial-gradient(right bottom, 
    ellipse, 
    #44D6FE 0%, 
    #3596E6 49%, 
    #7BB4EC 51%, 
    #FFFFFF 100%) repeat scroll 0 0 transparent 

這裏是什麼樣子 圖像

Answer 2

從任意圖像獲取漸變對於任何圖像處理器來說都會很困難。通過獲取圖像的像素數據，找到頂部和底部像素，將顏色數據拉出來，然後使用這些值創建漸變，您可能會獲得更好的運氣。

Answer 3

你的例子是兩個徑向梯度的重疊。有一個白色到中等藍色的光圈，以不透明的徑向漸變爲中心在按鈕上方，中間不透明;在簡單的藍色到白色徑向漸變的頂部，居中到右下角。