这篇文章介绍使用css3实现背景颜色渐变
CSS渐变色概念：
CSS渐变色(Gradients)能让我们用一种颜色渐变的效果修饰一个空间——从一种颜色过渡到另外一种颜色——填充这个空间。渐变色有两个形式：linear (线性渐变) 和 radial (环形渐变)。很显然CSS渐变色(Gradients)技术是产生了一种视觉图案效果，而实现这种视觉效果很简单，能通过简单编程实现。CSS3里很早就引入了CSS渐变色(Gradients)，但这种技术的推广却经历了很长时间。
CSS渐变色(Gradients)技术基本的语法：
立即学习“前端免费学习笔记（深入）”；
统一代码格式
background-image: linear-gradient( || ,]? , [, ]*)
登录后复制
第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点)，你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色，或一种颜色加一个百分比：
/* color-stop(percentage/amount, color) */color-stop(0.20, red)
登录后复制
下面的这段代码基本包括了自顶向下颜色渐变的所有情况：
{/* 底色 */background-color: #063053;/* chrome 2+, safari 4+; multiple color stops */background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));/* chrome 10+, safari 5.1+ */background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99); /* firefox; multiple color stops */background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99); /* ie 6+ */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');/* ie8 + */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')"; /* ie10 */background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);/* opera 11.1 */background-image: -o-linear-gradient(#063053, #395873, #5c7c99);/* 标准写法 */background-image: linear-gradient(#063053, #395873, #5c7c99);}
登录后复制
CSS渐变色(Gradients)技术里还支持带有角度的渐变方向，如45度角方向渐变：
/* fallback */background-color:#063053;/* chrome 2+, safari 4+; multiple color stops */background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-s top(0.66, #395873), color-stop(0.83, #5c7c99));/* chrome 10+, safari 5.1+ */background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);/* firefox; multiple color stops */background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);/* ie10 */background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);/* opera 11.1 */background-image: -o-linear-gradient(45deg, #063053, #395873);/* The "standard" */background-image: linear-gradient(45deg, #063053, #395873);}
登录后复制
CSS颜色渐变(Gradients)技术很有价值，但有时很难实现。有时你已经实现了想要的渐变，而浏览器的支持也会成为一个问题。下面是一些使用CSS颜色渐变(Gradients)的建议：
想让你的CSS颜色渐变(Gradients)表现一定的透明度？使用 rgba 颜色。
使用背景色垫底，这样防止当浏览器不支持时不注意没有任何颜色。
火狐浏览器和谷歌浏览器都支持repeating-linear-gradient 和 repeating-radial-gradient，用法是：
background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
登录后复制
效果：
基本的颜色线性渐变，自上而下
基本的颜色线性渐变，45度角(Chrome, Safari, Firefox, IE10, Opera)
以上就是使用CSS3实现背景颜色渐变 的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2905708.html
