水平CSS渐变？

Question

我想要一个渐变作为我的网页的背景.我已经想出如何使渐变垂直但我希望它是水平的.

background-image: -webkit-gradient(linear, 0% 25%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%);

Answer 1

对于-webkit-gradient您通过使用两个点(在你的情况下,第二个和第三个参数)定义的方向,以及-moz-linear-gradient它是由起点只(第一个参数)中定义.因此,要将这些渐变转换为水平渐变,您需要:

background-image: -webkit-gradient(linear, 25% 0%, 0% 0%, from(rgb(176, 196, 222)), to(rgb(255, 255, 255)));
background-image: -moz-linear-gradient(center right, rgb(153, 255, 51) 25%, rgb(255, 102, 51) 80%);

(您可能需要调整颜色值,因为您为每个浏览器定义了不同的点.如果您center right, center left为Webkit 设置点以匹配Mozilla ,可能会更容易.)