如何获得适合渐变的css代码？

Question

通常，当从photoshop .psd文件开发网站时，我面对硬渐变导航菜单。我的方法是什么？我剪了一小块菜单 然后aplly

background-repeat: repeat-x

这很好用。但是，我认为这不是最好的解决方案。是否有正确的方法或技术来获得任何渐变的正确css代码？

Answer 1

我使用颜色选择器（adobe photoshop）在菜单选项卡（锚点或li）中获取极端颜色然后应用CSS3的简单CSS渐变来获取使用这两个极端的背景颜色（如果需要，您可以使用颜色 - 挑中间色）。代码：

nav li{
 /* Safari 5.1 to 6.0 */
 background: -webkit-repeating-linear-gradient(top, #c19fd3 , #c39ff3);
/* Opera 11.1 to 12.0 */
background: -o-repeating-linear-gradient(top, #c19fd3 , #c39ff3);
/* Firefox 3.6 to 15 */
background: -moz-repeating-linear-gradient(top, #c19fd3 , #c39ff3);
/* Standard syntax */
background: repeating-linear-gradient(top, #c19fd3 , #c39ff3);
}

OR

您可能会使用渐变中的百分比来获得变体的确切颜色：

background: -webkit-repeating-linear-gradient(top, #c19fd3 10% , #c123f9 30%, #c39ff3);

它对我有用。