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

Question

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

background-repeat: repeat-x

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

Answer 1

我使用颜色选择器 (adobe photoshop) 在菜单选项卡(anchor 或 li)中获取极端颜色，然后应用 CSS3 的简单 CSS 渐变以使用这 2 个极端获取背景颜色(如果需要，您可以着色-选择中间颜色)。代码如下:

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

或

如果使用渐变中的百分比，您可能会得到变化的确切颜色:

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

它对我有用。