css实现渐变色，从做到右，从上到下

最新推荐文章于 2025-08-28 00:59:46 发布

原创最新推荐文章于 2025-08-28 00:59:46 发布 · 3.3w 阅读

16 ·

CC 4.0 BY-SA版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文介绍了如何使用CSS设置从左到右及从上到下的渐变背景效果，包括不同浏览器前缀的兼容性写法。

1，从左到右的渐变色：
background:#74F195;
	background:-webkit-linear-gradient(left,#74F195,#C8FF9A);
	background:-o-linear-gradient(right,#74F195,#C8FF9A);
	background:-moz-linear-gradient(right,#74F195,#C8FF9A);
	background:linear-gradient(to right,#74F195,#C8FF9A);

2，从上刀下的渐变色：

background: -moz-linear-gradient(top, #4B8C5C 0%, #75945E 100%) ;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a09d), color-stop(100%,#008985))  ;
    background: -webkit-linear-gradient(top, #00a09d 0%,#008985 100%) ;
    background: -o-linear-gradient(top, #00a09d 0%,#008985 100%) ;
    background: -ms-linear-gradient(top, #00a09d 0%,#008985 100%) ;