移动端背景渐变，非常的年轻，符合90后年轻一代的审美，css3的这个渐变目前主要是应用在手机前端领域。
产品设计中使用渐变色的好处：
1：观众不至于眼睛过于疲劳（如果是浅色背景，3个小时下来极容易造成观众闭上眼睛还有残影，眼睛会极度疲劳）。
2：优雅而低调的深浅色调:
3：纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感
4：稍微加点渐变可以让纯色层显得更细腻，不那么单调。画面显得更丰富。
代码如下，非常简单
新的梯度渐变语法，新的语法包含四个渐变函数：
linear-gradient()： 线性梯度渐变 radial-gradient()： 径向梯度渐变 repeating-linear-gradient()：重复梯度渐变 repeating-radial-gradient()：色站
一：线性渐变 linear-gradient()： 线性梯度渐变
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之css3实现背景渐变效果</title> <style type="text/css"> .linear{ /*仿支付宝背景蓝色渐变*/ background-image: linear-gradient(to top, #66b7f9,#1c82d4); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html>
二：radial-gradient径向渐变
代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之css3实现背景渐变效果</title> <style type="text/css"> .linear{ /*background-image: linear-gradient(to top, #66b7f9,#1c82d4);*/ background: radial-gradient(#ffffff,#1c82d4); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html>
三： repeating-linear-gradient()：重复梯度渐变
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之css3实现背景渐变效果</title> <style type="text/css"> .linear{ background: repeating-linear-gradient(#1c82d4, #fff 30%, #1c82d4 35%); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html>
四：repeating-radial-gradient()：色站
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <title>移动开发之css3实现背景渐变效果</title> <style type="text/css"> .linear{ background: repeating-radial-gradient(#1c82d4, #fff 30%, #1c82d4 35%); height: 15rem; } </style> </head> <body> <div class="linear"></div> </body> </html>
/全兼容的移动端渐变写法/
/* Firefox 3.6+ */ background: -moz-linear-gradient(top, #66b7f9,#1c82d4); /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear,top,from(#66b7f9),to(#1c82d4)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, #66b7f9, #1c82d4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #66b7f9, #1c82d4); /* default */ background: linear-gradient(top, #66b7f9, #1c82d4); background-color: #1c82d4;
