开发者

Horizontal CSS gradients?

开发者 https://www.devze.com 2023-01-17 04:40 出处:网络
I Want to have a gradient as the background of my webpage. I have figured out how to make the g开发者_Go百科radient vertical but I want it to be horizontal.

I Want to have a gradient as the background of my webpage. I have figured out how to make the g开发者_Go百科radient vertical but I want it to be horizontal.

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


For -webkit-gradient you define the direction by using the two points (the 2nd and 3rd argument in your case), and for -moz-linear-gradient it's defined by the starting point only (the first argument). So to turn those gradients to horizontal ones, you'd do:

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

(You might have to tweak your color values because you're defining the points differently for each browser. It could be easier if you set the points to center right, center left for Webkit as well to match Mozilla.)

0

精彩评论

暂无评论...
验证码 换一张
取 消