如何使准确的CSS3线性渐变，就像它在图像中？ [英] How to make exact CSS3 Linear gradient like it's in the image?

问题描述

例如这是我想要在CSS3中的渐变

For example this is gradient which I want to make in CSS3

我可以使用1像素图像剪切和x轴重复，我们以前做。但现在如果我想使用CSS3做同样精确的渐变。

I can use 1 px image cut and repeat in x axis as we were doing before. But now if I want to make same exact gradient using CSS3.

我知道许多免费的CSS3渐变生成器，制造商可在互联网上。

I know many free CSS3 Gradient Generator , Maker available on Internet. My questions is Which Generator is most preferred and how to make needed gradients with that.

在Alex的回答后编辑：更多渐变

Edit after Alex's answer : more Gradients

推荐答案

Ultimate CSS渐变生成器是我的首选选择。

background: #CCCCCC; 
background: -moz-linear-gradient(top, #CCCCCC 0%, #343434 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCCCCC), color-stop(100%,#343434));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#343434',GradientType=0 );

使用上面的渐变很容易。你可以看到它有一种颜色在顶部和步骤到下一个在底部。只需复制顶部和底部的颜色，并将它们放入发电机的相关输入。

It is rather easy to make the above gradient with. You can see it has one colour at top and steps to the next at bottom. Simply copy the top and bottom colour and place them into the relevant inputs on the generator.

这篇关于如何使准确的CSS3线性渐变，就像它在图像中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！