如何制作像图像中那样精确的 CSS3 线性渐变?

2024-05-11

For example this is gradient which I want to make in CSS3 enter image description here

我可以使用 1 px 图像剪切并在 x 轴上重复,就像我们之前所做的那样。但现在如果我想使用 CSS3 制作同样精确的渐变。

我知道互联网上有很多免费的 CSS3 渐变生成器、制作器。我的问题是哪个生成器是最优选的以及如何用它来制作所需的渐变。

Edit after Alex's answer : more Gradients enter image description here enter image description here enter image description here


终极 CSS 渐变生成器 http://www.colorzilla.com/gradient-editor/是我的首选。

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 );

制作上面的渐变相当容易。您可以看到它的顶部有一种颜色,底部有一种颜色。只需复制顶部和底部颜色并将它们放入生成器的相关输入中即可。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何制作像图像中那样精确的 CSS3 线性渐变? 的相关文章