例如,这是我想在CSS3中制作的渐变效果。
以前我们可以使用1像素的图像切片并在x轴上重复,但现在如果我想使用CSS3制作完全相同的渐变效果。
我知道互联网上有很多免费的CSS3渐变生成器和制作工具。我的问题是哪个生成器最受欢迎,如何使用它来制作所需的渐变效果。
在Alex回答后编辑:更多渐变效果
![enter image description here](https://istack.dev59.com/miPgq.webp)
我知道互联网上有很多免费的CSS3渐变生成器和制作工具。我的问题是哪个生成器最受欢迎,如何使用它来制作所需的渐变效果。
在Alex回答后编辑:更多渐变效果
![enter image description here](https://istack.dev59.com/BVgtz.gif)
![enter image description here](https://istack.dev59.com/1jRUt.webp)
![enter image description here](https://istack.dev59.com/FNNGP.gif)
终极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 );
使用这种渐变色非常简单。你可以看到它从顶部开始是一种颜色,然后逐渐向下过渡到另一种颜色。只需将顶部和底部的颜色复制并粘贴到生成器的相应输入框中即可。
线性渐变应该可以正常工作:
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#343434));
background: -moz-linear-gradient(top, #ccc, #343434);
我将推荐四个CSS3渐变生成器来完成这项工作。还有其他的生成器,但它们不如以下的好。
在所有这些工具中,gradientoo似乎是最用户友好和易于使用的。它提供了线性、径向和椭圆形CSS3渐变(跨浏览器兼容)。它也可以作为Firefox的附加组件使用。其中一个生成器就能完成你的工作(这是我的个人意见,你可能会有所不同;我还必须提到,gradientoo是由我开发的)。